Question

我一直在四处查看，似乎有一些示例说明如何执行与此操作类似的操作，但是我尝试了不同的方法，但没有提供可行的解决方案。

我有这个JSON文件：

 [
  {
    "name": "tool 1",
    "basic":[{
      "description": "text",
      "color": "red"
    }]
  },

  {
    "name": "tool 2",
    "basic":[{
      "description": "text",
      "color": "red"
    }]
  }
]

所以我正在使用jQuery对其进行解析，而我的代码如下：

$.getJSON("/js/data.json", function(data) {

  $.each(data, function(key,val) {
    console.log(val.name);
  });
});

它对于第一级项目（例如“名称”）效果很好；但是，如果我想对“描述”和“颜色”做同样的事情，而在主窗口内部不对每个窗口单独做一个“每个…”，似乎就行不通了。

我正在尝试找到一种简单而优雅的解决方案，例如：

console.log(val.basic.color);

但是它似乎不起作用（“未定义”。）

有什么想法或建议吗？

Answer 1

由于val.basic是一个数组，因此需要对其进行循环。

$.getJSON("/js/data.json", function(data) {

  $.each(data, function(key,val) {
    console.log(val.name);
    $.each(val.basic, function(index, basic) {
      console.log(basic.description, basic.color);
    });
  });
});

如果您只关心第一个元素，则可以将其编入索引：

console.log(val.basic[0].description, val.basic[0].color);

Answer 2

感谢Barmar，我想将解决方案发布给其他任何人。

这是现在格式化JSON的方式，删除[]以删除数组：

[
  {
    "name": "tool 1",
    "basic_info":{
      "description": "text 1",
      "color": "blue"
    },
    "advanced":{
      "description": "text 1 advanced",
      "color": "blue advanced"
    }
  },

  {
    "name": "tool 2",
    "basic_info":{
      "description": "text 1",
      "color": "red"
    },
    "advanced":{
      "description": "text 2 advanced",
      "color": "red advanced"
    }
  }
]

这是我用来访问第二级值的代码：

$.getJSON("/js/data.json", function(data) {

  $.each(data, function(key,val) {
    console.log(val.basic_info.color);
  });
});

使用jQuery解析嵌套JSON中的第二级

2 个答案: