Quiero cambiar la estructura json diferente a una estructura plana para facilitar la presentación en html. Así que tengo n anidado dentro de los datos, a veces tengo clave y valor, a veces solo valor. ¿Hay alguna manera fácil de hacerlo?
Este es un ejemplo de json que tengo:
{ "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" } } } }Y esto es algo que me gustaría conseguir
"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", }Estoy usando sencha js y la idea es presentar cualquier tipo de json dentro de html, algo como esto.
tpl: new Ext.XTemplate( '<table border="1" cellpadding="10" cellspacing="0">', '<tpl foreach=".">', '<tr>', '<td>{$}</td>', '<td>{.}</td>', '</tr>', '</tpl>', '</table>' , { complied: true } )La recursión es una solución:
ACTUALIZADO:
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; }Si desea aplanar el objeto, deberá hacer un bucle recursivo
A continuación se muestra la muestra simple solo para dar una idea de cómo funciona, no usa recursivo.
// 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]; } })