如何访问嵌套的 JSON 对象键和值答案

【问题标题】：How to access nested JSON object key and values如何访问嵌套的 JSON 对象键和值
【发布时间】：2016-11-10 15:02:59
【问题描述】：

我正在尝试像这样访问我的嵌套数组的键和值：

var obj = $.getJSON("mydata.json", function() {
    console.log( "load success" );
});

Object.keys(obj[2].type).forEach(function(key) {
    console.log(key, obj[key]);
});

但我得到一个错误。

这是 JSON 文件的结构：

{
"nodes": [
    {
        "nd": "nd1",
        "cat": "cat1"
    }
],
"links": [
    {
        "id": 100
    }
],
"types": [
            {
                "type": "one",
                "image": "image001"
            },
            {
                "type": "two",
                "image": "image002"
            },
            {
                "type": "three",
                "image": "image003"
            }
        ]

}

我的目标是获取以下值的列表：

一二三

【问题讨论】：

你得到什么错误？
var vals = obj.types.map((x) => x.image; });
对象没有key 2

标签： javascript jquery arrays json

【解决方案1】：

您可以使用以下代码进行操作：

var obj = {
"nodes": [
    {
        "nd": "nd1",
        "cat": "cat1"
    }
],
"links": [
    {
        "id": 100
    }
],
"types": [
            {
                "type": "one",
                "image": "image001"
            },
            {
                "type": "two",
                "image": "image002"
            },
            {
                "type": "three",
                "image": "image003"
            }
        ]   
};

Object.keys(obj["types"]).forEach(function(key) {
    console.log(obj["types"][key].image);
});

【讨论】：

【解决方案2】：

类似的东西？

您必须首先访问 object.types 属性，然后对其进行迭代以检索每种类型。

var object = {
  "nodes": [{
    "nd": "nd1",
    "cat": "cat1"
  }],
  "links": [{
    "id": 100
  }],
  "types": [{
    "type": "one",
    "image": "image001"
  }, {
    "type": "two",
    "image": "image002"
  }, {
    "type": "three",
    "image": "image003"
  }]
};


function parseJson(object){
    object.types.forEach(function(key) {
      console.log(key.type);
    });
}

parseJson(object);

--- 在评论中更新为回答问题---

您可以将代码封装在一个函数中，并在加载 json 时调用它：

$.getJSON("mydata.json", function(data) {
    parseJson(data);
});

【讨论】：

这行得通，但是如何从外部文件加载它。我该如何使用getJSON 命令？

【解决方案3】：

Object.keys(obj[2].type) 在这里没有任何意义。您不是在迭代任何对象的属性，而是在访问一组对象中的相同属性。这就是map 所做的。

var types = obj.types.map(x => x.type);

【讨论】：

map(x => x.type) 不是 TypeScript 语法吗？
@VitaliiSrimbanu：可能也是这样，但它也是 EcmaScript 6。

【解决方案4】：

$.getJSON 返回一个承诺，因为它是异步的，但您可以在回调中设置变量：

var obj;
$.getJSON("mydata.json", function(data) {
    obj = data;
    Object.keys(obj[2].type).forEach(function(key) {
        console.log(key, obj[key]);
    });
});

link to documentation

【讨论】：

【解决方案5】：

您应该发布您收到的错误，但我可以告诉您，问题在于您的输出代码在 JSON 对象加载之前执行。试试这个：

$.getJSON("mydata.json", function(obj) {
    console.log( "load success" );
    Object.keys(obj[2].type).forEach(function(key) {
        console.log(key, obj[key]);
    });
});

【讨论】：

【解决方案6】：

这是一种在 js 中实现的功能性方法：

    var types = $.getJSON("mydata.json").done(function(response) {
       return Object.keys(data["types"]).map(function(element){
            return element.type;
        }).join(' ');
    });            

   console.log(types);

【讨论】：