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;
}
If you want to flatten the object you will need to do recursive loop
Below is the simple sample just to give the idea on how it works, it doe not use recursive.
// You data to be flatten
var obj = { ... }
var data = {}
Object.keys(obj).forEach(function (item) {
// Check for value type of object
if(typeof obj[item] == 'object') {
// Check if array
if(Array.isArray(obj[item])) {
// Append the value
data[item] = obj[item];
} else {
// Must loop to this object
// You can recursive function
var nestObj = obj[item];
Object.keys(nestObj).forEach(nest => {
// Append to the data
// This time with nested object,
// We have to merge the parents key and the nested key
data[item+nest] = nestObj[nest]
})
}
} else {
// Append non object values
data[item] = obj[item];
}
})