如何遍历json并追加内部附加

Question

我有多个所有者的json列表。每个所有者都有自己的计时器列表。

我想遍历所有者，并将计时器附加到已经附加的所有者身上。

我该怎么做？

编辑：将＃timer-list更改为＃owner-list

这是我的json：

[
    {
        "ownerid": 1,
        "name": "Owner 1",
        "timers": [
            {
                "duration": "00:57:04.521586",
                "started": "2015-10-02T12:28:46+00:00",
                "completed_date": null,
                "paused_date": null,
                "objectid": 158,
                "paused": false,
                "completed": false,
                "resume_date": null
            },
            {
                "duration": "00:20:00",
                "started": null,
                "completed_date": null,
                "paused_date": null,
                "objectid": 172,
                "paused": false,
                "completed": false,
                "resume_date": null
            }
        ]
    },
    {
        "ownerid": 2,
        "name": "Owner 2",
        "timers": [
            {
                "duration": "10:00:00",
                "started": null,
                "completed_date": null,
                "paused_date": null,
                "objectid": 173,
                "paused": false,
                "completed": false,
                "resume_date": null
            },
            {
                "duration": "00:00:55",
                "started": null,
                "completed_date": null,
                "paused_date": null,
                "objectid": 176,
                "paused": false,
                "completed": false,
                "resume_date": null
            }
        ]
    }
]

我的js：

$.each(data, function(index, element) {
    console.log(element.ownername);

    $('#owner-list').append("<div id='timer_owner_" + element.ownerid + "'><h5>" + element.ownername + "</h5></div>");


        $.each(element.timers, function(index, element) {
            console.log(element);
        });            
});

如何附加到timer_owner_" + element.ownerid + "？

编辑2：

以下是我想要的html：

<div id="owner-list">

    <div id="timer_owner_1">
        <h5>Owner 1</h5>

        <ul class="timer-list">
            <li>Timer 1</li>
            <li>Timer 2</li>
        </ul>

    </div>
    <div id="timer_owner_2">
        <h5>Owner 2</h5>

        <ul class="timer-list">
            <li>Timer 3</li>
            <li>Timer 4</li>
        </ul>

    </div>
</div>

Answer 1

试试这段代码：

$.each(data, function(index, element) {
    console.log(element.ownername);

    $('#timer-list').append("<div id='timer_owner_" + element.ownerid + "'><h5>" + element.ownername + "</h5>");


        $.each(element.timers, function(index, element) {
            console.log(element);
            $('#timer-list').append('<span>'+element.duration+'</span><br>');
        });    
    $('#timer-list').append("</div>");        
});

或第二种方式：

$.each(data, function(index, element) {
    console.log(element.ownername);

        var timers ='<ul>';
        $.each(element.timers, function(index, element) {
            console.log(element);
            timers += '<li>'+element.duration+'</li>';
        });  
        timers += '</ul>';

   $('#timer-list').append("<div id='timer_owner_" + element.ownerid + "'><h5>" + element.ownername + "</h5>"+timers+"</div>");     
});

Answer 2

您可以先创建一个所有者元素，将计时器附加到它，然后将其附加到所有者列表：

$.each(data, function(index, element) {
console.log(element.ownername);

var $ownerElement = $("<div id='timer_owner_" + element.ownerid + "'><h5>" + element.ownername + "</h5></div>");

var $timerList = $('<ul></ul'>).addClass('timer-list');

$.each(element.timers, function(index, element) {
        var $timerElement = element; // create you timer element here
         $timerList.append($timerElement);
    }); 

$ownerElement.append($timerList);

$('owner-list').append($ownerElement);       
});

我很抱歉缩进，这是我给的第一个，希望它有所帮助。