如何通過json循環並追加內部追加

Question

我有多個所有者的json列表。每個擁有者都有自己的定時器列表。

我想遍歷所有者，並在已經附加的所有者中追加定時器。

我該怎麼做？

編輯：更改＃定時器列表＃業主名單

這裏是我的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

你可以創建一個所有者元素冷杉T，追加定時器，然後將其添加到所有者列表：

$.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);  
}); 

我的縮進抱歉，這是第一個asnwer給我，希望它幫助。