Question

假设这是你去网址时得到的json文件：

[
    {
        "id": 1,
        "date": "2015-06-23",
        "day_todo_set": [
            {
                "id":5
                "name": "Bloom",
                "very_important": True,
                "finished": False
            },
            {
                "id":4
                "name": "Shopping",
                "very_important": True,
                "finished": True
            }
        ]
    },
    {
        "id": 2,
        "date": "2015-06-22",
        "day_todo_set": [
            {
                "id":3
                "name": "REST",
                "very_important": True,
                "finished": True
            }
        ]
    }
]

我如何浏览每个day object并使用jquery在列表中显示每个todo来自day_todo_set的{{1}}，就像这样。

$(function () {
    var $days = $('#days')

    $.ajax({
        type: 'GET',
        url: '/days/',
        success: function(days) {
            $.each(days, function(i, day) {

                // APPEND IN #days
                 $days.append('<li>date: '+ day.date+ '</li>')

            });
        }
    });
})

为了获得这样的输出：

<ul id="days">
    <li class="day">
        <h2>22, June 2015</h2>
          <ul>
              <li class="todo">
                  <p class="todo_name">Bloom</p>
                  <p class="finished">Finished</p>
                  <span class="clear_both"></span>
              </li>
              <li class="todo">
                  <p class="todo_name">Shopping</p>
                  <p class="finished">Pending...</p>
                  <span class="clear_both"></span>
              </li>
          </ul>
    </li>

    <li class="day">
        <h2>22, June 2015</h2>
          <ul>
              <li class="todo">
                  <p class="todo_name">REST</p>
                  <p class="finished">Finished</p>
                  <span class="clear_both"></span>
              </li>
          </ul>
    </li>
</ul>

Answer 1

试试这个： -

var ul = $('.days');
ul.empty();
$.each(data, function (i, d) {
    var li = $('<li/>', { class: 'day' });
    li.append('<h2>' + d.date + '</h2>');
    var innerUl = $('<ul/>');
    $.each(d.day_todo_set, function (ii, dd) {
        var finished = dd.very_important == true ? "Finished" : "Un Finished";
        innerUl.append('<li class="todo"><p class="todo_name">' + dd.name + '</p><p class="finished">'+finished+'</p><span class="clear_both"></span></li>');
  li.append(innerUl);
    });
 ul.append(li);
});

Demo

Answer 2

我认为这段代码会对你有所帮助。

$(function () {
    var $days = $('#days')

    $.ajax({
        type: 'GET',
        url: '/days/',
        success: function (days) {
            var ul = '';
            $.each(days, function (i, day) {
                ul += '<li class="day">';
                ul += ' <h2>' + day.date + '</h2>';
                ul += ' <ul>'
                $.each(day.day_todo_set, function (i, set) {
                    ul += '      <li class="todo">';
                    ul += '          <p class="todo_name">' + set.name + '</p>';
                    ul += '          <p class="finished">' + set.finished + '</p>';
                    ul += '          <span class="clear_both"></span>';
                    ul += '      </li>';
                });
                ul += '  </ul>';
            });
            $days.html(ul);
        }
    });
});

使用jquery附加嵌套的json对象

2 个答案: