I want to change different json structure into flat structure for easily presentation on html. So I have n nesting inside data, sometimes I got key and value sometimes just value. Is there any easy way to do it ?
This is some example of json that I have:
{
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
},
"GlossSee": "markup"
}
}
}
}
And this is something what I would like to get
"glossary": {
"title": "example glossary",
"GlossDivTitle": "S",
"GlossDivGlossListGlossEntryID": "SGML",
"GlossDivGlossListGlossEntrySortAs": "SGML",
"GlossDivGlossListGlossEntryGlossTerm": "Standard Generalized Markup Language",
"GlossDivGlossListGlossEntryAcronym": "SGML",
"GlossDivGlossListGlossEntryAbbrev": "ISO 8879:1986",
"GlossDivGlossListGlossEntryGlossDefPara": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossDivGlossListGlossEntryGlossDefGlossSeeAlso": "GML, XML",
"GlossDivGlossListGlossEntryGlossSee": "markup",
}
I'm using sencha js and Idea is to present any kind of json inside html, something like this.
tpl: new Ext.XTemplate(
'<table border="1" cellpadding="10" cellspacing="0">',
'<tpl foreach=".">',
'<tr>',
'<td>{$}</td>',
'<td>{.}</td>',
'</tr>',
'</tpl>',
'</table>'
, {
complied: true
}
)
Recursion is a solution:
UPDATED:
const flattenedKeys = (json) => {
// Container for the keys
const flattenedObj = {};
const traverse = (obj, currentPath = '') => {
// Traverse all the properties
Object.entries(obj).forEach(([key, value]) => {
const newPath = currentPath + key;
// If obj[key] is an array
if (Array.isArray(value)) {
value.forEach(item => {
traverse(item, newPath)
});
return;
}
// If obj[key] traverse recursively nested properties
if (typeof value === 'object') return traverse(value, newPath);
// If obj[key] is not an object or an array
flattenedObj[newPath] = value;
});
}
// Traverse recursively the whole object
traverse(json);
return flattenedObj;
}