javascript - 以特定方式解析嵌套对象数组

标签 javascript arrays object

我有一个对象数组,可以将其他对象数组作为子对象(它可以具有复杂的层次结构):如果一个对象有一个 children 属性 - 它是一个组,如果它没有t — 这是一个项目:

var myData = [
  {
      "name": "item 1"
  },
  {
      "name": "group 1",
      "children": [
      {
          "name": "item in a group 1"
      }]
  },
  {
      "name": "group 2",
      "children": [
      {
          "name": "group 1 in a group 2",
          "children": [
          {
              "name": "item in a nested group 1"
          },
          {
              "name": "deeply nested group",
              "children": [
              {
                  "name": "deep item"
              }]
          },]
      },
      {
          "name": "group 2 in a group 2",
          "children": [
          {
              "name": "item in a nested group 2"
          }]
      }]
  }]

我想将其解析为一个平面对象,该对象将所有组作为 Prop ,将项目作为数组,每个 Prop 还包括来自孙子组的项目。

目前,使用下面的代码,我可以展平数组,并将组作为 Prop ,将项目作为每个对象的数组:

{
    "root": [
        "item 1"
    ],
    "group 1": [
        "item in a group 1"
    ],
    "group 2": [],
    "group 1 in a group 2": [
        "item in a nested group 1"
    ],
    "deeply nested group": [
        "deep item"
    ],
    "group 2 in a group 2": [
        "item in a nested group 2"
    ]
}

但是,我正在努力增加孙子。这是所需的输出:

{
    "root": [
        "item 1"
    ],
    "group 1": [
        "item in a group 1"
    ],
    "group 2": [
        "item in a nested group 1", // includes items of child groups
        "item in a nested group 2",
        "deep item"
    ],
    "group 1 in a group 2": [
        "item in a nested group 1",
        "deep item" // includes item of a child group
    ],
    "deeply nested group": [
        "deep item"
    ],
    "group 2 in a group 2": [
        "item in a nested group 2"
    ]
}

这是我正在使用的代码(我只能使用旧版本的纯 JS,所以不能使用 ES6、NPM;不过可以使用 polyfill)

var myItems = {
    'root': []
}
var i;

for (i = 0; i < myData.length; i++)
{
    parseItems(myData[i], 'root')
}

function parseItems(data, groupName)
{
    var key, i;
    for (key in data)
    {
        if (!data.hasOwnProperty(key))
          continue;
        else if (data.hasOwnProperty('children'))
        {
            groupName = data['name']
            if (myItems[groupName] == undefined) myItems[groupName] = []
            for (i = 0; i < data[key].length; i++)
            {
                parseItems(data[key][i], groupName);
            }
        }
        else
        {
            myItems[groupName].push(data['name']);
        }
    }
}

而且我不明白如何制作此代码的版本(或者可能更好的东西?)来用孙子项目填充父组。

最佳答案

古代版本。

function flat(array, parents, target) {
    var i, j;

    parents = parents || [];
    target = target || { root: [] };

    for (i = 0; i < array.length; i++) {
        if (array[i].children) {
            flat(array[i].children, parents.concat(array[i].name), target);
            continue;
        }
        if (parents.length) {
            for (j = 0; j < parents.length; j++) {
                if (!target[parents[j]]) target[parents[j]] = [];
                target[parents[j]].push(array[i].name);
            }
        } else {
            target.root.push(array[i].name);
        }
    }

    return target;
}


var data = [{ name: "item 1" }, { name: "group 1", children: [{ name: "item in a group 1" }] }, { name: "group 2", children: [{ name: "group 1 in a group 2", children: [{ name: "item in a nested group 1" }, { name: "deeply nested group", children: [{ name: "deep item" }] }] }, { name: "group 2 in a group 2", children: [{ name: "item in a nested group 2" }] }] }],
    result = flat(data);

console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

关于javascript - 以特定方式解析嵌套对象数组,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62382287/

相关文章:

javascript - 跨 iframe 触发点击

javascript - Javascript 异步回调背后的机制

php - 如何在插入语句中循环

javascript - 如何避免在加载外部 JS 文件之前丢失对它的调用

javascript - 获取嵌套对象/数组 JavaScript 的值

javascript - 如何使用 Xpages onchange 事件激活按钮

javascript - 如何提高scrollmagic的速度

c++ - 在 C++ 中打印 vector 数组

c - 将多个字符串传递给函数 c

objective-c - 这个对象会发生什么