John Wick
Reputation: 509
Traverse array of objects using map. filter, reduce or Object.keys() in javascript
I have a JSON array objects that I want to only output some of its data, just like a tree, I have tried different loops but I want to use map, filter and reduce for is the better way now to traverse an array of objects.
my expected output is just like this.
Note: the second Project101 in the tree is wrong due to the loops, it should be removed and have only Project101, Project102, Project103 in the tree.
Here is the sample json file
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
}
]
}
]
Thank you in advance.
what I've tried this is long due to loops.
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.')
}
});
}
Upvotes: 0
Views: 123
Answers (1)
xianshenglu
Reputation: 5309
see this,
https://jsfiddle.net/xianshenglu/5wtLffjp/1/
the core code:
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;
}
Upvotes: 1
Related Questions
- Map and Reduce JSON Objects with JavaScript
- Filter array of objects on key from array of values JavaScript
- Filtering an object to contain only keys that exist in an array of objects
- Reducing an array of objects to key value map
- filter object by keys then flatten it to an array
- map / filter object values if iteration's key is in Array
- Transform array of objects into array of objects with an extra property with map, filter, reduce
- reduce/filter array of objects by object key
- How to map and reduce over an array of objects?
- Traverse nested maps / objects from keys in an array