[英]Traverse array of objects using map. filter, reduce or Object.keys() in javascript
我有一个JSON数组对象，我只想输出它的一些数据，就像一棵树一样，我尝试了不同的循环，但是我想使用map，filter和reduce来遍历对象数组。
我的预期输出就是这样。
注意 ：由于循环，树中的第二个Project101是错误的，应将其删除，并且树中仅包含Project101，Project102，Project103。
这是示例json文件
var jsonData = [
{
"id": 1,
"project_name": "Project101",
"updated_by": "Chaddilac Change",
"created_date": "2018-01-09T15:49:54Z",
"updated_date": "2018-01-09T15:49:54Z",
"is_deleted": false,
"languages": [
{
"id": 1,
"language": "English",
"created_by": "Sammy Sosa",
"created_date": "2018-01-04T04:45:54Z",
"beta_project": 1,
"details": [
{
"id": 1,
"phase_name": "BetaPhase101",
"created_date": "2018-01-04T04:33:00Z",
"created_by": "John Doe",
"phase_title": "BetaTitle",
"external_url": "www.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": "Gelly",
"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 S",
"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": "BetaPhase102",
"created_date": "2010-10-10T00:00:00Z",
"created_by": "John Doe",
"phase_title": "BetaTitle",
"external_url": "www.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": "Gelly",
"last_update_date": "2010-10-10T00:00:00Z",
"last_updated_by": "John Doe",
"last_published_date": "2010-10-10T00:00:00Z",
"last_published_by": "TRex",
"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",
"created_by": "Tsn",
"updated_by": "Chad Change",
"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": "BetaPhase103",
"created_date": "2018-01-04T04:37:13Z",
"created_by": "John Doe",
"phase_title": "BetaTitle",
"external_url": "www.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": "Gelly",
"last_update_date": "2018-01-04T04:37:13Z",
"last_updated_by": "John Doe",
"last_published_date": "2018-01-04T04:37:13Z",
"last_published_by": "TRex",
"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",
"created_by": "Max",
"updated_by": "Fried",
"created_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 GetLanguageData(betaid){
var temp_data = ''
$.getJSON("/api/get, function (result) {
temp_data = result
})
return temp_data;
}
function LoadJsTree(){
//alert('loadjstree')
var list_newprojects = []
var list_ongoing = []
var list_finished = []
var list_archived = []
var arraylist = []
var betaphaselist = []
var betalanglist = []
var betaprojectlist = []
var fulltree = []
var phaselist_tree = []
var language_tree = []
var en_arr = []
var tc_arr = []
var sc_arr = []
var jp_arr = []
var fr_arr = []
var gm_arr = []
var sp_arr = []
arr_lang = []
group_lang = []
var languages = ['English','Simplified Chinese','Traditional Chinese','Japanese','French','German','Spanish']
$.getJSON("/projectlanguagedetails/", function (alldata) {
console.log(alldata)
for (var bp in alldata){
betaprojectlist.push(alldata[bp])
var obj_language = alldata[bp].languages
for ( var lang in obj_language )
{
console.log('obj_language[lang]',obj_language[lang])
betalanglist.push(obj_language[lang])
var obj_details = obj_language[lang].details
for (var d in obj_details){
console.log('obj_details',obj_details[d])
//if(obj_language[lang].id == obj_details[d].beta_language){
if(obj_language[lang].language == 'English'){
var detail_display =
{
"id" : obj_details[d].id,
"langid":obj_details[d].beta_language,
"text" : obj_details[d].phase_name,
"icon" : "../static/backoffice/images/icon-file.png",
"data" : { "isPhase" : true }
}
en_arr.push(detail_display)
}
else if(obj_language[lang].language == 'Traditional Chinese'){
var detail_display =
{
"id" : obj_details[d].id,
"langid":obj_details[d].beta_language,
"text" : obj_details[d].phase_name,
"icon" : "../static/backoffice/images/icon-file.png",
"data" : { "isPhase" : true }
}
tc_arr.push(detail_display)
}
else if(obj_language[lang].language == 'Simplified Chinese'){
var detail_display =
{
"id" : obj_details[d].id,
"langid":obj_details[d].beta_language,
"text" : obj_details[d].phase_name,
"icon" : "../static/backoffice/images/icon-file.png",
"data" : { "isPhase" : true }
}
sc_arr.push(detail_display)
}
else if(obj_language[lang].language == 'Japanese'){
var detail_display =
{
"id" : obj_details[d].id,
"langid":obj_details[d].beta_language,
"text" : obj_details[d].phase_name,
"icon" : "../static/backoffice/images/icon-file.png",
"data" : { "isPhase" : true }
}
jp_arr.push(detail_display)
}
}
}
}
}).then(function(){
console.log('languages',en_arr)
console.log('betalanglist',betalanglist)
for (var lang in betalanglist){
language = betalanglist[lang].language
lang_id = betalanglist[lang].id
if(language == 'English')
{
var lang_display = {
"langid":lang_id,
"beta_id":betalanglist[lang].beta_project,
"text" : language,
"icon" : "../static/backoffice/images/icon-folder.png",
"data" : { "isLanguage" : true },
"state": { "opened" : true },
"children" :
en_arr
}
language_tree.push(lang_display)
}
else if(language == 'Traditional Chinese')
{
var lang_display = {
"langid":lang_id,
"beta_id":betalanglist[lang].beta_project,
"text" : language,
"icon" : "../static/backoffice/images/icon-folder.png",
"data" : { "isLanguage" : true },
"state": { "opened" : true },
"children" :
tc_arr
}
language_tree.push(lang_display)
}
else if(language == 'Simplified Chinese')
{
var lang_display = {
"langid":lang_id,
"beta_id":betalanglist[lang].beta_project,
"text" : language,
"icon" : "../static/backoffice/images/icon-folder.png",
"data" : { "isLanguage" : true },
"state": { "opened" : true },
"children" :
sc_arr
}
language_tree.push(lang_display)
}
else if(language == 'Japanese')
{
var lang_display = {
"langid":lang_id,
"beta_id":betalanglist[lang].beta_project,
"text" : language,
"icon" : "../static/backoffice/images/icon-folder.png",
"data" : { "isLanguage" : true },
"state": { "opened" : true },
"children" :
jp_arr
}
language_tree.push(lang_display)
}
}
}).then(function(){
console.log('betaprojectlist',betaprojectlist)
console.log('language_tree',language_tree)
for( var x in language_tree){
var beta_id = language_tree[x].beta_id
//alert(beta_id)
for (var bp in betaprojectlist){
var betaprojectid = betaprojectlist[bp].id
var betaprojectname = betaprojectlist[bp].project_name
if(betaprojectid == beta_id ){
arr_lang.push(language_tree[x])
//alert(betaprojectid)
var project_display =
{
"betaprojectid":betaprojectid,
"text" : betaprojectname,
"icon": "../static/backoffice/images/icon-briefcase.png",
"data" : { "isProject" : true },
"state": { "opened" : true },
"children" :
[
language_tree[x]
]
}
//if(project_display.beta_project_id == beta_id)
//{
fulltree.push(project_display)
//}
}
console.log('arr_lang',arr_lang)
}
}
}).then(function(){
}).then(function(){
console.log('fulltree',fulltree)
$("#jstreeBetaProjects").jstree({
"core": {
"check_callback": true,
"themes" : { "stripes" : true },
"data": [
{ "text" : "New Projects",
"state" : {"opened": true},
"data" : { "isParent" : true, "cache":false, },
"icon" : "../static/backoffice/images/icon-folder-star.png",
"children" :fulltree
}
]
},
"types" : {
"#" : {
},
"default" : {
"valid_children" : ["file"],
"icon" : "../static/backoffice/images/icon-folder.png"
},
"file" : {
"icon" : "../static/backoffice/images/icon-file.png"
}
},
"plugins": [ "contextmenu", "themes" ],
"contextmenu": {items: customMenu}
});
})
// function resfreshJSTree() {
// var acctobj = jQuery.parseJSON(localStorage['arraylist']);
// $('#jstreeBetaProjects').jstree(true).settings.core.data = acctobj;
// $('#jstreeBetaProjects').jstree(true).refresh();
// }
}
$("#btnCreateBetaTitle").click(function(){
CreateBetaProject()
});
$("#btnSaveBetaTitle").click(function(){
RenameBetaProject()
});
function CreateBetaProject(){
var projectname = $('#lblProjectTitle').val()
$.ajax({
url: '/api/get_delete_update_post',
type: 'POST',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({
"project_name": projectname,
"is_deleted": false,
"created_by": "Sam Marcos Samarro",
"updated_by": "Chad Change",
}),
success: function(data) {
console.log(data)
LoadJsTree()
alert('Successfully Added!')
},
error: function(data) {
console.log(data)
alert('Failed.')
}
});
}
function RenameBetaProject(){
var projectname = $('#lblRenameBetaTitle').val()
var projectid = $("#hdnpid").text();
var anchorId = "#"+projectid + "_anchor"
$.ajax({
url: '/api/get_delete_update_post_beta,
type: 'PUT',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: JSON.stringify({
"project_name": projectname,
"is_deleted": false,
"created_by": "Sam Marcos Samarro",
"updated_by": "Chad Change",
}),
success: function(data) {
// console.log(data)
// $("#jstreeBetaProjects").html(data)
// $('#jstreeBetaProjects').jstree(true).refresh();
// resfreshJSTree()
// LoadJsTree()
//window.location.reload();
//location.reload(true)
//$(anchorId).text(projectname);
$(anchorId).html('');
$(anchorId).append('<i class="jstree-icon jstree-themeicon jstree-themeicon-custom" role="presentation" style="background-image: url("../static/backoffice/images/icon-briefcase.png"); background-position: center center; background-size: auto;"></i>'+projectname)
$("#modal-rename-project").modal('hide');
//tree.jstree("refresh");
alert('Successfully Renamed!')
},
error: function(data) {
console.log(data)
alert('Failed.')
}
});
}
看到这个
https://jsfiddle.net/xianshenglu/5wtLffjp/1/
核心代码：
function transData(data) {
let dataTemp = JSON.parse(JSON.stringify(data));
function iteratorProperty(dataTemp, propertyArray, level) {
if (dataTemp != undefined) {
dataTemp.forEach((obj, index) => {
Object.keys(obj).forEach((key, val) => {
if (propertyArray.indexOf(key) === -1) {
delete obj[key];
}
});
switch (level) {
case 0:
iteratorProperty(obj.languages, ['language', 'details'], 1);
break;
case 1:
iteratorProperty(obj.details, ['phase_name'], 2);
break;
}
});
}
return dataTemp;
}
iteratorProperty(dataTemp, ['project_name', 'languages'], 0);
return dataTemp;
}
在单个 const 中使用 Object.keys()、map()、...Array()、reduce() 和 concat()
[英]Using Object.keys(), map(), …Array(), reduce() and concat() in a single const
在JavaScript中使用带有reduce的map来过滤数组中的对象
[英]Using map with reduce in javascript to filter objects in an array
Javascript Object.keys(arr).reduce() 返回最低键
[英]Javascript Object.keys(arr).reduce() return lowest key
重构 Object.keys(object).map 以获取嵌套数组值。 JavaScript
[英]Refactor Object.keys(object).map to get the a nested array value. JavaScript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.