javascript - 使用 JavaScript 和 jQuery 显示多级嵌套 JSON 数据

Question

我的原始项目只有一层 JSON 数据，但它已经增长，我需要第二个嵌套层。

根据我的研究，我似乎可以简单地采用原始的 object.name 并将其附加到我需要创建的新 member 级别，如 object .members.name。然而，这会返回一个错误未定义。

显然有些东西是错误的或缺失的，我已经摸不着头脑有一段时间了。

我检查了我的 JSON 格式很多次，并通过验证器运行它(检查结果正常)，控制台中没有显示任何错误，而且我所做的任何搜索似乎都会带来比我的更复杂的场景。我似乎无法缩小问题的范围。

非常感谢任何帮助或指导!

以下是代码块:

• 非工作多级
• 工作单级

<小时/>

非工作多级 JSON 数据版本

var obj = 
{ 
  "results": [
    { 				
        "members": [
          { 	
          "name": "John Smith", 
          "state": "NY", 
          "phone": "555-555-1111"
        },
        {
          "name": "Mary Jones", 
          "state": "PA", 
          "phone": "555-555-2222"
        }, 
        {
          "name": "Edward Edwards", 
          "state": "NY", 
          "phone": "555-555-3333"
        }, 
        {
          "name": "Abby Abberson", 
          "state": "RI", 
          "phone": "555-555-4444"
        } 
      ]
    }
  ]
};


$(obj.results).each(function(k,object){

  var output = $("div.output");
  output.append(object.members.name + " ");
  output.append(object.members.phone + "<br />");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

<小时/>

工作单级 JSON 数据版本

var obj = { 
  "results": [

      { 	
      "name": "John Smith", 
      "state": "NY", 
      "phone": "555-555-1111"
    },
    {
      "name": "Mary Jones", 
      "state": "PA", 
      "phone": "555-555-2222"
    }, 
    {
      "name": "Edward Edwards", 
      "state": "NY", 
      "phone": "555-555-3333"
    }, 
    {
      "name": "Abby Abberson", 
      "state": "RI", 
      "phone": "555-555-4444"
    } 

  ]
};


$(obj.results).each(function(k,object){

  var output = $("div.output");
  output.append(object.name + " ");
  output.append(object.phone + "<br />");

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output"></div>

Answer 1

嵌套你的each语句？

var obj = {
  "results": [{
    "members": [{
        "name": "John Smith",
        "state": "NY",
        "phone": "555-555-1111"
      },
      {
        "name": "Mary Jones",
        "state": "PA",
        "phone": "555-555-2222"
      },
      {
        "name": "Edward Edwards",
        "state": "NY",
        "phone": "555-555-3333"
      },
      {
        "name": "Abby Abberson",
        "state": "RI",
        "phone": "555-555-4444"
      }
    ]
  }]
};


$(obj.results).each(function(k, result) {

  var output = $("div.output");
  $(result.members).each(function(index, member) {
    output.append(member.name + " ");
    output.append(member.phone + "<br />");
  })

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="output">

</div>

当然，我会避免使用“object”或“obj”等名称——而是使用结果和成员。更加助记。你就会确切地知道它指的是什么。