使用getJSON列入嵌套JSON的項目

Question

我有一個JSON如下：

  {"sessions":[
    {
        "totalusers":"2",
        "Users": [
            { "id": 1, "name": "abc" },
            { "id": 2, "name": "def" }
        ]
    }
  ]}

我的HTML如下所示

     <div>
        <p class="totalusers">Total Users</p>
        <p class="Users">Users</p>
     </div>

我的Jquery

  $.getJSON("sample.json",  function(data) {
  $(".totalusers").append(data.sessions[0].totalusers); 
  $(".Users").append(data.sessions[0].Users.id[]);
 }  );

我希望JSON中的所有用戶都顯示在HTML的列表中。 請幫忙。 我在jQuery“data.sessions [0] .Users.id []”中遺漏了一些東西來顯示整個列表。

Answer 1

Praveen的答案是正確的方向，但他沒有正確使用$ .each。 您需要使用$ .each來迭代每個用戶。

$.getJSON("sample.json",  function(data) {
  $(".totalusers").append(data.sessions[0].totalusers); 
  $.each(data.sessions[0].Users, function(i, value){
    $(".Users").append(value.id);
  })
});

我還建議您更改HTML以使用實際列表

<div>
    <p class="totalusers">Total Users</p>
    <p class="Users">Users</p>
    <ul class="users-list"></ul>
 </div>

然后你的JS將是：

$.getJSON("sample.json",  function(data) {
  $(".totalusers").append(data.sessions[0].totalusers); 
  $.each(data.sessions[0].Users, function(i, value){
    $(".users-list").append('<li>' + value.id + '</li>');
  })
});

Answer 2

你需要的是$.each()函數。

$.getJSON("sample.json",  function(data) {
  $(".totalusers").append(data.sessions[0].totalusers);
  var $Users = $(".Users");
  $.each(data.sessions[0].Users, function(i, value){
    $Users.append(value.id);
  });
});