extjs 将动态Json结构修改为平面键和值

7kjnsjlb 于 2022-11-04 发布在其他

关注(0)|答案(2)|浏览(125)

我想把不同的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
            }
        )

extjs

来源：https://stackoverflow.com/questions/69765017/modify-dynamic-json-structure-to-flat-keys-and-value

2条答案

按热度按时间

a14dhokn1#

递归是一种解决方案：

更新日期：

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;

}

赞(0）回复(0）举报 2022-11-04

z18hc3ub2#

如果你想平面化的对象，你将需要做递归循环
下面是一个简单的例子，只是为了给予它如何工作的想法，它不使用递归。

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

赞(0）回复(0）举报 2022-11-04

我来回答

extjs 将动态Json结构修改为平面键和值

2条答案

相关问题

热门标签

最新问答