Modify Dynamic Json structure to flat keys and value-CodePudding

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

CodePudding user response：

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;

}

CodePudding user response：

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