将 Dynamic Json 结构修改为平面键和值

Question

我想将不同的 json 结构更改为平面结构，以便在 html 上轻松呈现。所以我有 n 嵌套在数据中，有时我得到键和值有时只是值。有什么简单的方法吗？

这是我拥有的 json 的一些示例：

         {
            "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"
                    }
                }
            }
        }

这是我想要得到的东西

        "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",
        }

我正在使用 sencha js，想法是在 html 中呈现任何类型的 json，类似这样。

        tpl: new Ext.XTemplate(
            '<table border="1" cellpadding="10" cellspacing="0">',
            '<tpl foreach=".">',
            '<tr>',
            '<td>{$}</td>',
            '<td>{.}</td>',
            '</tr>',
            '</tpl>',
            '</table>'
            , {
                complied: true
            }
        )

Answer 1

如果你想展平对象你需要做递归循环

下面是一个简单的示例，只是为了说明它是如何工作的，它不使用递归。

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

Answer 2

递归是一个解决方案：

更新：

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;

}

将 Dynamic Json 结构修改为平面键和值

Modify Dynamic Json structure to flat keys and value

javascript

arrays

json

extjs