Search code examples
javascriptarraysjsonextjs

Modify Dynamic Json structure to flat keys and value


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
            }
        )

Solution

  • 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;
    
    }