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

使用getJSON列入嵌套JSON的项目

2 个答案: