Используйте jQuery, чтобы получить часть значения JSON и вставить его в div

0

Я работаю с JSON, который содержит куски значений HTML. Ниже представлена упрощенная версия JSON, которая поможет вам визуализировать:

{
"header" : "<a class='widget'>widget</a>
            <a class='widget'>widget</a>
            <ul class='header'>
                 <li>link1</li>
                 <li>link2</li>
                 <li>link3</li>
            </ul>"
            <a class='random'>random link</a>
            <a class='random'>random link</a>,

"footer" : "<a class='social'>social</a>
            <a class='social'>social</a>
            <ul class='footer'>
                 <li>link1</li>
                 <li>link2</li>
                 <li>link3</li>
            </ul>"
 }

У меня возникли проблемы с поиском способа загрузки JSON, извлечение "ul.header" и его ввод в div (с использованием jQuery):

<div class="giveMeHeaderList"></div>

Конечный результат должен выглядеть следующим образом:

<div class="giveMeHeaderLinks">
    <ul class='header'>
        <li>link1</li>
        <li>link2</li>
        <li>link3</li>
    </ul>
</div>

(Приносим извинения, если JSON имеет неправильный формат, поскольку я набрал его быстро и использую его только для отображения)

Спасибо за помощь!

Теги:
extract
inject

3 ответа

0
Лучший ответ

Это сделает это:

демонстрация

var obj = JSON.parse(json);

$('.giveMeHeaderList').append($('<div>' + obj.header + '</div>').find('ul.header'));
  • 0
    Это здорово. Однако на самом деле я не контролирую JSON, поэтому не могу превратить его в переменную. Есть ли способ, которым я могу достичь этого, не касаясь JSON?
  • 0
    Nvm! Я просто изменил «obj.header» на «data.header», и он работал как драгоценный камень. Спасибо!
0

Лучшее решение:

$.post("url/", {},
        function (data/*({header: "<ul>...</ul>"})*/, textStatus) {
          $("#giveMeHeaderLinks").html(data.header)
        }, 
"json");

но вам нужно ввести только часть значения заголовка, попробуйте это;

$.post("url/", {},
        function (data, textStatus) {
          $("#giveMeHeaderLinks").append($("<div>"+data.header+"</div>").find("ul.header"));
        }, 
"json");
0

Предположим, что у вас есть этот JSON:

htmltext = {"header": "<span><ul><a class='widget'>widget</a></ul></span>", "footer":"<a class='foot'>footer</a>"}

и у вас есть следующий код html:

<head>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
</head>

<body>
    <div class="giveMeHeaderList">test</div>
</body>

Запуск следующего JS приведет к тому, что вы хотите:

$(".giveMeHeaderList").append($(htmltext.header).find('ul'));

используя jQuery.find, чтобы найти элемент <ul> внутри html и добавить его к соответствующему.

htmltext - это место, где находится ваш JSON, а header - соответствующий элемент JSON

  • 0
    В моих тестах выполнение этого добавит все значение. Мне нужна только определенная часть этого значения. В моем примере я хотел бы ТОЛЬКО <ul> без тегов <a>.
  • 0
    Я отредактировал ответ в соответствии с тем, что вам нужно
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню