在 javascript 中使用 Object.keys() 和 map() 方法访问对象数组答案

【问题标题】：Access array of object using Object.keys() and map() method in javascript在 javascript 中使用 Object.keys() 和 map() 方法访问对象数组
【发布时间】：2018-01-10 10:31:57
【问题描述】：

如何访问结构如下的对象数组？我想构建一个树来输出数组中的languages对象以及它的嵌套对象，以及使用Object.keys()和map()。

基本上我想遍历每个对象并访问其中的languages 对象。

这是我到目前为止所尝试的：

var productMap2 = {};

 productMap2 = Object.keys(jsonData[0]).map(function(key) {
                  return jsonData[0][key];
                });

这是我的 JSON：

   var jsonData = [
    {
        "id": 1,
        "project_name": "Project101-updated TODAY",
        "created_by": "John Doe",
        "updated_by": "Wes Smith",
        "created_date": "2018-01-09T15:49:54Z",
        "updated_date": "2018-01-09T15:49:54Z",
        "is_deleted": false,
        "languages": [
            {
                "id": 1,
                "language": "English",
                "created_by": "John Doe",
                "created_date": "2018-01-04T04:45:54Z",
                "beta_project": 1,
                "details": [
                    {
                        "id": 1,
                        "phase_name": "Phase1",
                        "created_date": "2018-01-04T04:33:00Z",
                        "created_by": "John Doe",
                        "phase_title": "Title",
                        "external_url": "https://wwww.nba.com",
                        "segment": "Consumer",
                        "locale": "English",
                        "is_published": false,
                        "beta_start_date": "1975-01-01T00:00:00Z",
                        "beta_end_date": "1975-01-01T00:00:00Z",
                        "project_owner": "John Doe",
                        "project_subtitutes": "Gello Tupac",
                        "last_update_date": "2018-01-04T04:33:00Z",
                        "last_updated_by": "John Doe",
                        "last_published_date": "2018-01-04T04:33:00Z",
                        "last_published_by": "Neil Armstrong",
                        "accrdn_title_one": "title one",
                        "accrdn_contents_one": "content one",
                        "accrdn_title_two": "title two",
                        "accrdn_contents_two": "content two",
                        "accrdn_title_three": "title three",
                        "accrdn_contents_three": "content three",
                        "accrdn_title_four": "titile four",
                        "accrdn_contents_four": "content four",
                        "accrdn_title_five": "title five",
                        "accrdn_contents_five": "content five",
                        "accrdn_title_six": "title six",
                        "accrdn_contents_six": "content six",
                        "beta_language": 1
                    },
                    {
                        "id": 2,
                        "phase_name": "Phase2",
                        "created_date": "2010-10-10T00:00:00Z",
                        "created_by": "John Doe",
                        "phase_title": "Title",
                        "external_url": "https://wwww.nba.com",
                        "segment": "Consumer",
                        "locale": "English",
                        "is_published": false,
                        "beta_start_date": "2018-01-01T00:00:00Z",
                        "beta_end_date": "2018-10-20T00:00:00Z",
                        "project_owner": "John Doe",
                        "project_subtitutes": "Gello Tupac",
                        "last_update_date": "2010-10-10T00:00:00Z",
                        "last_updated_by": "John Doe",
                        "last_published_date": "2010-10-10T00:00:00Z",
                        "last_published_by": "Neil Armstrong",
                        "accrdn_title_one": "title one",
                        "accrdn_contents_one": "content one",
                        "accrdn_title_two": "title two",
                        "accrdn_contents_two": "content two",
                        "accrdn_title_three": "title three",
                        "accrdn_contents_three": "content three",
                        "accrdn_title_four": "titile four",
                        "accrdn_contents_four": "content four",
                        "accrdn_title_five": "title five",
                        "accrdn_contents_five": "content five",
                        "accrdn_title_six": "title six",
                        "accrdn_contents_six": "content six",
                        "beta_language": 1
                    }
                ]
            },
            {
                "id": 4,
                "language": "Japanese",
                "created_by": "John Doe",
                "created_date": "2018-01-09T01:35:23.743333Z",
                "beta_project": 1
            }
        ]
    },
    {
        "id": 2,
        "project_name": "Project102-updated",
        "created_by": "Sammy Sosa",
        "updated_by": "Wes Smith",
        "created_date": "2018-01-05T03:13:08Z",
        "updated_date": "2018-01-05T03:13:08Z",
        "is_deleted": false,
        "languages": [
            {
                "id": 2,
                "language": "Traditional Chines",
                "created_by": "John Doe",
                "created_date": "2018-01-04T04:46:16Z",
                "beta_project": 2,
                "details": [
                    {
                        "id": 4,
                        "phase_name": "Phase3",
                        "created_date": "2018-01-04T04:37:13Z",
                        "created_by": "John Doe",
                        "phase_title": "Title",
                        "external_url": "https://wwww.nba.com",
                        "segment": "Consumer",
                        "locale": "English",
                        "is_published": false,
                        "beta_start_date": "2010-10-10T00:00:00Z",
                        "beta_end_date": "2018-01-01T00:00:00Z",
                        "project_owner": "John Doe",
                        "project_subtitutes": "Gello Tupac",
                        "last_update_date": "2018-01-04T04:37:13Z",
                        "last_updated_by": "John Doe",
                        "last_published_date": "2018-01-04T04:37:13Z",
                        "last_published_by": "Neil Armstrong",
                        "accrdn_title_one": "title one",
                        "accrdn_contents_one": "content one",
                        "accrdn_title_two": "title two",
                        "accrdn_contents_two": "content two",
                        "accrdn_title_three": "title three",
                        "accrdn_contents_three": "content three",
                        "accrdn_title_four": "titile four",
                        "accrdn_contents_four": "content four",
                        "accrdn_title_five": "title five",
                        "accrdn_contents_five": "content five",
                        "accrdn_title_six": "title six",
                        "accrdn_contents_six": "content six",
                        "beta_language": 2
                    }
                ]
            }
        ]
    },
    {
        "id": 10,
        "project_name": "Project103-updated",
        "created_by": "JOHN doe",
        "updated_by": "Wes Smith",
        "ceated_date": "2018-01-05T03:13:08Z",
        "updated_date": "2018-01-05T03:13:08Z",
        "is_deleted": false,
        "languages": [
            {
                "id": 3,
                "language": "Simplified Chines",
                "created_by": "John Doe",
                "created_date": "2018-01-09T01:34:26.240000Z",
                "beta_project": 10
            }
        ]
    }
]

【问题讨论】：

预期的输出是什么？到目前为止您尝试了什么？
感谢您的回复，我刚刚循环了一遍，就像这样 for(var i in jsonData){ var key = i; var val = jsonData[i]; for(var j in val){ var sub_key = j; var sub_val = val[j]; console.log(sub_key); } }
好的，请将预期的输出和您的尝试添加到问题本身。
什么是“循环过多”？
我刚刚编辑了我的问题。谢谢你的回复

标签： javascript arrays json data-structures mapreduce

【解决方案1】：

Array.prototype.reduce 是一个非常好的工具，既方便又强大，对于这样的任务......

var jsonData = [{
  "id": 1,
  "project_name": "Project101-updated TODAY",
  "created_by": "John Doe",
  "updated_by": "Wes Smith",
  "created_date": "2018-01-09T15:49:54Z",
  "updated_date": "2018-01-09T15:49:54Z",
  "is_deleted": false,
  "languages": [{
    "id": 1,
    "language": "English",
    "created_by": "John Doe",
    "created_date": "2018-01-04T04:45:54Z",
    "beta_project": 1,
    "details": [{
      "id": 1,
      "phase_name": "Phase1",
      "created_date": "2018-01-04T04:33:00Z",
      "created_by": "John Doe",
      "phase_title": "Title",
      "external_url": "https://wwww.nba.com",
      "segment": "Consumer",
      "locale": "English",
      "is_published": false,
      "beta_start_date": "1975-01-01T00:00:00Z",
      "beta_end_date": "1975-01-01T00:00:00Z",
      "project_owner": "John Doe",
      "project_subtitutes": "Gello Tupac",
      "last_update_date": "2018-01-04T04:33:00Z",
      "last_updated_by": "John Doe",
      "last_published_date": "2018-01-04T04:33:00Z",
      "last_published_by": "Neil Armstrong",
      "accrdn_title_one": "title one",
      "accrdn_contents_one": "content one",
      "accrdn_title_two": "title two",
      "accrdn_contents_two": "content two",
      "accrdn_title_three": "title three",
      "accrdn_contents_three": "content three",
      "accrdn_title_four": "titile four",
      "accrdn_contents_four": "content four",
      "accrdn_title_five": "title five",
      "accrdn_contents_five": "content five",
      "accrdn_title_six": "title six",
      "accrdn_contents_six": "content six",
      "beta_language": 1
    }, {
      "id": 2,
      "phase_name": "Phase2",
      "created_date": "2010-10-10T00:00:00Z",
      "created_by": "John Doe",
      "phase_title": "Title",
      "external_url": "https://wwww.nba.com",
      "segment": "Consumer",
      "locale": "English",
      "is_published": false,
      "beta_start_date": "2018-01-01T00:00:00Z",
      "beta_end_date": "2018-10-20T00:00:00Z",
      "project_owner": "John Doe",
      "project_subtitutes": "Gello Tupac",
      "last_update_date": "2010-10-10T00:00:00Z",
      "last_updated_by": "John Doe",
      "last_published_date": "2010-10-10T00:00:00Z",
      "last_published_by": "Neil Armstrong",
      "accrdn_title_one": "title one",
      "accrdn_contents_one": "content one",
      "accrdn_title_two": "title two",
      "accrdn_contents_two": "content two",
      "accrdn_title_three": "title three",
      "accrdn_contents_three": "content three",
      "accrdn_title_four": "titile four",
      "accrdn_contents_four": "content four",
      "accrdn_title_five": "title five",
      "accrdn_contents_five": "content five",
      "accrdn_title_six": "title six",
      "accrdn_contents_six": "content six",
      "beta_language": 1
    }]
  }, {
    "id": 4,
    "language": "Japanese",
    "created_by": "John Doe",
    "created_date": "2018-01-09T01:35:23.743333Z",
    "beta_project": 1
  }]
}, {
  "id": 2,
  "project_name": "Project102-updated",
  "created_by": "Sammy Sosa",
  "updated_by": "Wes Smith",
  "created_date": "2018-01-05T03:13:08Z",
  "updated_date": "2018-01-05T03:13:08Z",
  "is_deleted": false,
  "languages": [{
    "id": 2,
    "language": "Traditional Chines",
    "created_by": "John Doe",
    "created_date": "2018-01-04T04:46:16Z",
    "beta_project": 2,
    "details": [{
      "id": 4,
      "phase_name": "Phase3",
      "created_date": "2018-01-04T04:37:13Z",
      "created_by": "John Doe",
      "phase_title": "Title",
      "external_url": "https://wwww.nba.com",
      "segment": "Consumer",
      "locale": "English",
      "is_published": false,
      "beta_start_date": "2010-10-10T00:00:00Z",
      "beta_end_date": "2018-01-01T00:00:00Z",
      "project_owner": "John Doe",
      "project_subtitutes": "Gello Tupac",
      "last_update_date": "2018-01-04T04:37:13Z",
      "last_updated_by": "John Doe",
      "last_published_date": "2018-01-04T04:37:13Z",
      "last_published_by": "Neil Armstrong",
      "accrdn_title_one": "title one",
      "accrdn_contents_one": "content one",
      "accrdn_title_two": "title two",
      "accrdn_contents_two": "content two",
      "accrdn_title_three": "title three",
      "accrdn_contents_three": "content three",
      "accrdn_title_four": "titile four",
      "accrdn_contents_four": "content four",
      "accrdn_title_five": "title five",
      "accrdn_contents_five": "content five",
      "accrdn_title_six": "title six",
      "accrdn_contents_six": "content six",
      "beta_language": 2
    }]
  }]
}, {
  "id": 10,
  "project_name": "Project103-updated",
  "created_by": "JOHN doe",
  "updated_by": "Wes Smith",
  "ceated_date": "2018-01-05T03:13:08Z",
  "updated_date": "2018-01-05T03:13:08Z",
  "is_deleted": false,
  "languages": [{
    "id": 3,
    "language": "Simplified Chines",
    "created_by": "John Doe",
    "created_date": "2018-01-09T01:34:26.240000Z",
    "beta_project": 10
  }]
}];


function collectLanguageItemFromProjectList (collector, projectItem) {
  var
    languageMap   = collector.map;
    languageList  = collector.list;

  projectItem.languages.forEach(function (languageItem) {
    if (!(languageItem.language in languageMap)) {  // registry lookup.

      languageMap[languageItem.language] = true;    // registry update.
      languageList.push(languageItem);
    }
  });
  return collector;
}


var languageList = jsonData.reduce(collectLanguageItemFromProjectList, {

  map : {},
  list: []

}).list;


console.log('languageList : ', languageList);

.as-console-wrapper { max-height: 100%!important; top: 0; }

【讨论】：

哇，谢谢。是否也可以在语言对象中显示详细信息对象数组，因为它显示 []object] 作为结果
@JohnWick ...该函数从给定列表中收集任何language对象，我假设（d），Project项目。它通过将任何匹配的引用推入数组来实现。它试图通过区分language 对象的language 属性值来防止重复。最后的languageList 包含唯一的language 项目引用，每个项目都是其相关（父）Project 项目的子结构。因此，每个列出的language 项目都配备齐全，包括details 属性，以防引用的结构确实具有它。
@JohnWick ...您看到的[object] 可能是由于您将最终列表记录到的环境。如果按下上面提供的示例代码的“运行代码 sn-p”按钮，则会获得原始jsonData 对象提供的所有功能的完整日志。因此，确实会看到details 两次。第一个是"language": "English"，第二个是"language": "Traditional Chines"。
啊，是的，你说得对 Peter，我现在已经把它放在 Atom 中了，我现在可以看到它，所以我也可以在所有这些中循环，所以我可以看到整个 JSON 数据?谢谢

【解决方案2】：

构建树绝对是一项递归任务。但是，您的结构中包含数组，因此如果您尝试在纸上绘制结构并命名每个部分，您的数组元素将没有名称，或者它们将有数字。
我要做的是根据数组值名称为每个数组元素命名（例如，如果您有“语言”数组，从对象中选择“语言”属性，并在“详细信息”上选择“阶段名称”）并使用在你的树上。
解决方案代码本身取决于预期的树结构。定义这样的结构似乎是合乎逻辑的：
TreeNode{ 'name': string, 'value': string, //null if it has children 'children': [TreeNode], //null if it has value 'expanded': boolean //irrelevant if it has value }
我以前在以前的工作场所做过这个，我使用了两个返回转换后的结构的递归函数（一个用于对象，一个用于数组），但我有一个不同的数组结构。在这里确定对象键的值类型并为每个元素调用递归函数并为其创建一个子元素就足够了。

【讨论】：