【问题标题】:How best to restructure JSON child data object arrays into parent array如何最好地将 JSON 子数据对象数组重组为父数组
【发布时间】:2018-09-07 00:54:45
【问题描述】:

我们有一些 JSON 数据,其中每个父数组对象都可以有一个属性,该属性是一个“子”数组,如下所示:

data: [
  {
    value: 1,
    parent_id: null,
    label: "1.0 - TT One",
    children: [
      {
        value: 3,
        label: "1.1 - TT One-One",
        parent_id: 1,
      },
     {
        value: 4,
        label: "1.2 - TT One-Two",
        parent_id: 1,
     }
    ]
  },
  {
    value: 2,
    parent_id: null,
    label: "2.0 - TT Two",
    children: [
      {
        value: 5,
        label: "2.1 - TT Two-One",
        parent_id: 2,
      }
    ]
  }
]

我们想“扁平化”孩子,这样我们最终得到一个包含所有父母和孩子的数组,如下所示(如果效率不高,它不必保持命名数据):

data: [
  {  
    value: 1,
    parent_id: null,
    label: "1.0 - TT One"
  },
  {  <-- FORMER CHILD
    value: 3,
    label: "1.1 - TT One-One",
    parent_id: 1
   },
   {  <-- FORMER CHILD
     value: 4,
     label: "1.2 - TT One-Two",
     parent_id: 1,
   },
   {
     value: 2,
     parent_id: null,
     label: "2.0 - TT Two"
   },
   {  <-- FORMER CHILD
     value: 5,
     label: "2.1 - TT Two-One",
     parent_id: 2,
   }
]  

关于如何在一个高效的庄园中最好地实现这一点的想法?如果这会有所帮助,我们会在下面划线。

【问题讨论】:

  • 发布的问题似乎根本没有包含any attempt 来解决问题。 StackOverflow 期待您 try to solve your own problem first,因为您的尝试有助于我们更好地了解您想要什么。请编辑问题以显示您尝试过的内容,以说明您在minimal reproducible example 中遇到的特定问题。欲了解更多信息,请参阅How to Ask 并拨打tour
  • 这是什么问题?
  • 找到了一个数组到数组展平和一些对象到数组展平的对接,但没有将两者结合起来。如果我们有这个,我们就不需要发帖了。如果从我们所拥有的到我们需要的并不明显,那有什么意义呢?
  • 问一个关于 SO 的问题并得到递归问题而不是答案?

标签: javascript arrays json


【解决方案1】:

找到了一个数组到数组展平和一些对象到数组展平的对接,但没有将两者结合起来。如果我们有这个,我们就不需要发帖了。如果从我们所拥有的到我们需要的并不明显,那有什么意义呢?

关键是要了解您的数据结构是什么以及如何访问该数据结构的每个元素。

由于只有 2 个级别,您甚至不需要找到通用解决方案来将初始数据转换为数组。你知道如何遍历数组吗?那么你就知道如何遍历具有数组作为属性的元素了。

无论如何,这里既是递归的,也是非递归的广义解决方案。

var d = [{
    value: 1,
    parent_id: null,
    label: "1.0 - TT One",
    children: [{
        value: 3,
        label: "1.1 - TT One-One",
        parent_id: 1,
      },
      {
        value: 4,
        label: "1.2 - TT One-Two",
        parent_id: 1,
      }
    ]
  },
  {
    value: 2,
    parent_id: null,
    label: "2.0 - TT Two",
    children: [{
      value: 5,
      label: "2.1 - TT Two-One",
      parent_id: 2,
    }]
  }
];

function walkRecursive(data) {
  let result = []
  data.forEach(element => {
    let e = { ...element}
    result.push(e);
    if (e.children) {
      let children = walkRecursive(e.children)
      result = result.concat(children)
      delete e.children
    }
  });
  return result;
}

function walk(data) {
  data = data.slice()
  let result = []
  let d, oldData;
  while (d = data.shift()) {
    let el = { ...d}
    result.push(el)
    if (el.children) {
      oldData = data
      data = el.children.slice();
      delete el.children;
    } else {
      if (oldData && data.length == 0) {
        data = oldData
        oldData = null;
      }
    }
  }
  return result;
}


console.log(walkRecursive(d))
console.log(walk(d))

https://codeburst.io/learn-and-understand-recursion-in-javascript-b588218e87ea

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-19
    • 1970-01-01
    • 2018-11-13
    相关资源
    最近更新 更多