如何访问如下结构的对象数组?我想构建一个树来输出数据中的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
}
]
}
]
答案 0 :(得分: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; }
答案 1 :(得分:0)
构建树绝对是一个递归任务。但是你的结构中有数组,所以如果你尝试在纸上绘制你的结构,命名每个部分,你的数组的元素将没有名字,或者它们会有数字。
我要做的是根据数组值名称给每个数组元素一个名称(例如,如果你有"语言"数组,从对象中选择"语言"属性,以及"详细信息"选择" phase_name")并在树中使用它
解决方案代码本身取决于预期的树结构。定义这样的结构似乎合乎逻辑:
TreeNode{
'name': string,
'value': string, //null if it has children
'children': [TreeNode], //null if it has value
'expanded': boolean //irrelevant if it has value
}
我之前在我以前的工作场所做过这个,我使用了两个递归转换结构的递归函数(一个用于对象,一个用于数组)但是我有一个不同的数组结构。在这里,确定对象键的值类型并为每个元素调用递归函数并为其创建子类就足够了。