如何从 JSON 对象中的数组中获取键名及其值答案

【问题标题】：How can I get the key name and its value from an array within a JSON object如何从 JSON 对象中的数组中获取键名及其值
【发布时间】：2017-02-08 08:59:18
【问题描述】：

我的问题

在我的 JSON 文件中，我在一个对象中有一个对象，其值是一个键/值对数组。我无法输出每个键名及其值。

我的代码

menu.json

{"themenu":[
    {
        "stuff": "stuffs",
        "pages": [
            {"name1": "page111"},
            {"name2": "page222"},
            {"name3": "page333"}
        ]
    }
]}

menu.js

$(function() {
    $.getJSON('menu.json', function(data) {
        $(data.themenu).each(function() {
            var stuff = this.stuff;
            alert(stuff); // alerts 'stuffs'
            $(this.pages).each(function(key, value) { 
                var pageName = this.key;
                var pageUrl = this.value;
                alert(pageName + ' ' + pageUrl);
            })
        })
    })
})

我需要什么

我想输出键名和对应的值，这样就和这个一样了……

alert('name1 page111');
alert('name2 page222');
alert('name3 page333');

我的尝试

我尝试了一些方法，包括...

$(data.pages).each(function(key, value) { 
    var pageName = this.key;
    var pageUrl = this.value;
})

...还有一堆我不好意思发帖的巫毒教。

【问题讨论】：

试试var pageName = Object.keys(this)[0], pageUrl = this[pageName]; })
@haim770 ！我喜欢你如何使用变量来获取值！请发布为答案，以便我接受。 :)

标签： jquery json

【解决方案1】：

只需使用此代码，它就可以工作。我只是更改了您的代码的一些内容，试试这个::

var json_data = {"themenu":[
    {
        "stuff": "stuffs",
        "pages": [
            {"name1": "page111"},
            {"name2": "page222"},
            {"name3": "page333"}
        ]
    }
]};
$(document).ready(function() {
//  $.getJSON(json_data, function(data) {
        $(json_data.themenu).each(function() {
            var stuff = this.stuff;
            alert(stuff); // alerts 'stuffs'
            $(this.pages).each(function(key, value) { 
                $.each(this, function(key, value) {
                    var pageName = key;
                    var pageUrl = value;
                    alert(pageName + ' ' + pageUrl);
                });
            });
        });
//    })
});

假设var json_data 有你的数据，根据需要替换它。

【讨论】：

嗨，拉娜，谢谢，这很好用！我想虽然我将不得不接受海姆的评论作为答案（如果他发布的话）

【解决方案2】：

当循环您的 JSON 并使用 this.key/this.value 时，您实际上搜索键 key/value（如果它是 {'key': ..., 'value': ...}。

您的$.each(this.pages, function (key, value) 为您提供所需值的数组。您可以再次循环以获取键/值作为文本：

var json = {
  "pages": [{
    "name1": "page111"
  }, {
    "name2": "page222"
  }, {
    "name3": "page333"
  }]
};

$.each(json.pages, function(k, v) {
  console.log(k, v);
  $.each(this, function(key, value) {
    console.log('->', key, value);
    //alert(keyName + ' ' + value);
  });
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

您可以使用原始 JavaScript 和 forEach 方法迭代数组，然后使用 Object.keys() 检索对象的键。

var json_data = {
  "themenu": [{
    "stuff": "stuffs",
    "pages": [{
      "name1": "page111"
    }, {
      "name2": "page222"
    }, {
      "name3": "page333"
    }]
  }]
}


json_data['themenu'].forEach(function(menu) {
  menu.pages.forEach(function(page) {
    alert(Object.keys(page)[0] + ' ' + page[Object.keys(page)[0]]);
  });
});

【讨论】：

谢谢迈克尔，这对我来说很好用！但是，我可能会接受 haim 的回答（第一条评论），因为它对原始代码（jquery）的改动最少，而且非常简洁。