I'm looking to create a valid nested Json file, from an array, with unique keys value. Currently, I'm only able to to display the json without any nested structure.
I would like to display to the console the following structure :
{
"Key" : "data1",
"header" : {
"title" : "data2",
"tag1" : "data3",
"tag2" : "data4"
},
"body" : {
"text" : "data5"
},
"updates" : {
"title" : "data6",
"text" : "data7"
},
"footer" : {
"title" : "data8",
"row1" :{
"col1" : {
"title" : "data9",
"text" : "data10"
},
"col2" : {
"title" : "data11",
"text" : "data12"
},
"col3" : {
"title" : "data13",
"text" : "data14"
}
},
"row2" :{
"col1" : {
"title" : "data15",
"text" : "data16"
},
"col2" : {
"title" : "data17",
"text" : "data18"
},
"col3" : {
"title" : "data19",
"text" : "data20"
}
},
"row3" :{
"col1" : {
"title" : "data22",
"text" : "data23"
},
"col2" : {
"title" : "data24",
"titlebis" : "data25",
"text" : "data26"
},
"col3" : {
"title" : "data27",
"text" : "data28"
}
},
"row4" :{
"col1" : {
"title" : "data29"
},
"website" : "data30",
"website-link" : "data31",
"email" : "data38",
"privacy" : "data32",
"privacy-link" : "data33",
"adr" : "data34",
"adr2" : "data35"
}
},
"other" : {
"short" : {
"des" : "data36"
},
"promovideo" : "data37"
}
}
here is what I already done:
var data = [["Key", "data1"], ["header.title", "data2"], ["header.tag1", "data3"], ["header.tag2", "data4"], ["body.text", "data5"], ["updates.title", "data6"], ["updates.text", "data7"], ["footer.title", "data8"], ["footer.row1.col1.title", "data9"], ["footer.row1.col1.text", "data10"], ["footer.row1.col2.title", "data11"], ["footer.row1.col2.text", "data12"], ["footer.row1.col3.title", "data13"], ["footer.row1.col3.text", "data14"], ["footer.row2.col1.title", "data15"], ["footer.row2.col1.text", "data16"], ["footer.row2.col2.title", "data17"], ["footer.row2.col2.text2", "data18"], ["footer.row2.col3.title", "data19"], ["footer.row2.col3.text", "data20"], ["footer.row3.col1.title", "data22"], ["footer.row3.col1.text", "data23"], ["footer.row3.col2.title", "data24"], ["footer.row3.col2.title", "data25"], ["footer.row3.col2.text", "data26"], ["footer.row3.col3.title", "data27"], ["footer.row3.col3.text", "data28"], ["footer.row4.col1.title", "data29"], ["footer.row4.website", "data30"], ["footer.row4.website-link", "data31"], ["footer.row4.email", "data31"], ["footer.row4.privacy", "data32"], ["footer.row4.privacy-link", "data33"], ["footer.row4.adr", "data34"], ["footer.row4.adr2", "data35"], ["other.short.des", "data36"], ["other.promovideo", "data37"], ]; // console.log(data); data.sort(alphabetical); // Sort alphabetically our 2D array CreateAndDisplayJson(data); // Create a JSON file from Keys Trad Data function CreateAndDisplayJson(GetKeysTraductionArrayData) { var lenght = GetKeysTraductionArrayData.length; var output = "{\\n"; for (var i = 0; i < GetKeysTraductionArrayData.length; i++) { var key = GetKeysTraductionArrayData[i][0]; var trad = GetKeysTraductionArrayData[i][1]; var nameSplit = key.split("."); // Check how many times we need to indent json from Key if(nameSplit.length>1) { // The Key needs to be indented var closeBraket = ""; var spacing = ""; // Json indentation var saveSpacingTab = []; // Closing indentation for (j=0; j <nameSplit.length; j++){ // We add the key + indentation output += spacing+"\\""+nameSplit[j]+"\\" : { \\n"; if (j==0 && i != GetKeysTraductionArrayData.length-1) { closeBraket = spacing+"}, \\n"; } else { closeBraket = spacing+"} \\n"; } spacing +=" "; saveSpacingTab[j] = closeBraket; closingText = ""; if (j==nameSplit.length-1) { // last indentation of the Key saveSpacingTab.reverse(); for ( k=0; k < saveSpacingTab.length ; k++) { // We create the Bracket indentation closingText += saveSpacingTab[k]; } output += spacing+"\\""+nameSplit[j]+"\\" : " + "\\""+trad +"\\"\\n" + closingText; // last Row } } } else { output += "\\""+key+"\\" : " + "\\""+trad +"\\", \\n"; } } // output += "}" + outputCommented; output += "}"; console.log(output); return output; } // Sort alphabetically our 2D array function alphabetical(a, b) { var A = a[0]; var B = b[0].toLowerCase(); A = A.toLowerCase(); B = B.toLowerCase(); if (A < B) return -1; if (A > B) return 1; return 0; }
You can use forEach
loop and inside split
each key and then use reduce
to build nested structure for each key.
var data = [["Key","data1"],["header.title","data2"],["header.tag1","data3"],["header.tag2","data4"],["body.text","data5"],["updates.title","data6"],["updates.text","data7"],["footer.title","data8"],["footer.row1.col1.title","data9"],["footer.row1.col1.text","data10"],["footer.row1.col2.title","data11"],["footer.row1.col2.text","data12"],["footer.row1.col3.title","data13"],["footer.row1.col3.text","data14"],["footer.row2.col1.title","data15"],["footer.row2.col1.text","data16"],["footer.row2.col2.title","data17"],["footer.row2.col2.text2","data18"],["footer.row2.col3.title","data19"],["footer.row2.col3.text","data20"],["footer.row3.col1.title","data22"],["footer.row3.col1.text","data23"],["footer.row3.col2.title","data24"],["footer.row3.col2.title","data25"],["footer.row3.col2.text","data26"],["footer.row3.col3.title","data27"],["footer.row3.col3.text","data28"],["footer.row4.col1.title","data29"],["footer.row4.website","data30"],["footer.row4.website-link","data31"],["footer.row4.email","data31"],["footer.row4.privacy","data32"],["footer.row4.privacy-link","data33"],["footer.row4.adr","data34"],["footer.row4.adr2","data35"],["other.short.des","data36"],["other.promovideo","data37"]] let result = {} data.forEach(([key, value]) => { key.split('.').reduce((r, k, i, arr) => { return r[k] || (r[k] = arr[i + 1] ? {} : value) }, result) }) console.log(result)
A non-ternary solution with reduce
:
const data = [["Key","data1"],["header.title","data2"],["header.tag1","data3"],["header.tag2","data4"],["body.text","data5"],["updates.title","data6"],["updates.text","data7"],["footer.title","data8"],["footer.row1.col1.title","data9"],["footer.row1.col1.text","data10"],["footer.row1.col2.title","data11"],["footer.row1.col2.text","data12"],["footer.row1.col3.title","data13"],["footer.row1.col3.text","data14"],["footer.row2.col1.title","data15"],["footer.row2.col1.text","data16"],["footer.row2.col2.title","data17"],["footer.row2.col2.text2","data18"],["footer.row2.col3.title","data19"],["footer.row2.col3.text","data20"],["footer.row3.col1.title","data22"],["footer.row3.col1.text","data23"],["footer.row3.col2.title","data24"],["footer.row3.col2.title","data25"],["footer.row3.col2.text","data26"],["footer.row3.col3.title","data27"],["footer.row3.col3.text","data28"],["footer.row4.col1.title","data29"],["footer.row4.website","data30"],["footer.row4.website-link","data31"],["footer.row4.email","data31"],["footer.row4.privacy","data32"],["footer.row4.privacy-link","data33"],["footer.row4.adr","data34"],["footer.row4.adr2","data35"],["other.short.des","data36"],["other.promovideo","data37"]]
const result = data.reduce((all, [keys, val]) => {
keys.split('.').reduce((obj, key, i, arr) => {
if (i === arr.length - 1) {
obj[key] = val;
} else {
if (!obj.hasOwnProperty(key)) {
obj[key] = {};
};
}
return obj[key];
}, all);
return all;
}, {});
console.log(result);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.