如何根据先前的对象数组创建正确的数组结构？ JavaScript

Question

希望你过得好。我有一个关于如何清理数组并使其成为新数组的问题。我给你上下文，我有以下数组：

const array = [
 { id: 1, parentId: null, name: Example },
 { id: 2, parentId: 1, name: Example },
 { id: 3, parentId: 1, name: Example },
 { id: 4, parentId: 1, name: Example },
 { id: 5, parentId: 2, name: Example },
 { id: 6, parentId: 2, name: Example },
 { id: 7, parentId: 6, name: Example },
 { id: 8, parentId: 7, name: Example },
 { id: 9, parentId: 7, name: Example },
];

我想知道如何将它转换成一个数组，其结构是第一个元素是连接到最小 parentId 的元素，在本例中为 1。后来，根据这个值，形成了新数组在其对象内。例如：

const array = [
 { id: 1, parentId: null, name: Example },
 { id: 2, parentId: 1, name: Example },
 { id: 3, parentId: 1, name: Example },
 { id: 4, parentId: 1, name: Example },
 { id: 5, parentId: 2, name: Example },
 { id: 6, parentId: 2, name: Example },
 { id: 7, parentId: 6, name: Example },
 { id: 8, parentId: 7, name: Example },
 { id: 9, parentId: 7, name: Example },
];

进入这个：

const array = [
 { 
   id: 1, 
   parentId: null, 
   name: Example,
   options: [
    { 
      id: 2, 
      parentId: 1, 
      name: Example,
      options: [
       { id: 5, parentId: 2, name: Example },
       { id: 6, parentId: 2, name: Example },
      ]
    },
    { id: 3, parentId: 1, name: Example },
    { id: 4, parentId: 1, name: Example },
    { 
     id: 7, 
     parentId: 1, 
     name: Example,
     options: [
      { id: 8, parentId: 7, name: Example },
      { id: 9, parentId: 7, name: Example },
     ]
    },
   ]
 },
];

该数组现在根据父 ID 对其选项进行排序。谁能帮帮我？我真的觉得自己很困惑。

我尝试使用 map 方法，但在一些元素之后变得困难。

Answer 1

您可以使用递归为每个元素创建嵌套对象，每个元素的 parentId 与其父元素的 ID 相匹配。

function createNestedArray(array, parentId) {
  const result = [];

  array.forEach(item => {
    if (item.parentId === parentId) {
      const nestedItems = createNestedArray(array, item.id);
      if (nestedItems.length) {
        item.options = nestedItems;
      }
      result.push(item);
    }
  });

  return result;
}

const array = [
 { id: 1, parentId: null, name: "Example" },
 { id: 2, parentId: 1, name: "Example" },
 { id: 3, parentId: 1, name: "Example" },
 { id: 4, parentId: 1, name: "Example" },
 { id: 5, parentId: 2, name: "Example" },
 { id: 6, parentId: 2, name: "Example" },
 { id: 7, parentId: 6, name: "Example" },
 { id: 8, parentId: 7, name: "Example" },
 { id: 9, parentId: 7, name: "Example" },
];

const nestedArray = createNestedArray(array, null);
console.log(nestedArray)

Answer 2

您可以为此使用递归函数。该函数假定顶级项目的 parentId 为 null。如果不是这种情况，您可能需要修改函数以将顶级 parentId 值作为参数传递。

function convertArray(arr, parentId = null) {
  const result = [];
  // We iterate over each item.
  for (const item of arr) {
    // If the item `parentId` matches the one received as parameter, 
    // this means the item is a child of the current parent node, 
    // and the function needs to recursively process its children.
    if (item.parentId === parentId) {
      // We copy the current item.
      const newItem = { ...item };
      // we call this function recursively with the `id` property of 
      // the current item as the new `parentId` parameter.
      // The results of the call is stored in the options property of `newItem`.
      // This creates a nested array of objects representing the child nodes.
      newItem.options = convertArray(arr, item.id);
      // We pushes newItem onto the result array.
      result.push(newItem);
    }
  }
  // Once all items in the input array have been processed, we return the result.
  return result;
}

const array = [
 { id: 1, parentId: null, name: 'Example' },
 { id: 2, parentId: 1, name: 'Example' },
 { id: 3, parentId: 1, name: 'Example' },
 { id: 4, parentId: 1, name: 'Example' },
 { id: 5, parentId: 2, name: 'Example' },
 { id: 6, parentId: 2, name: 'Example' },
 { id: 7, parentId: 6, name: 'Example' },
 { id: 8, parentId: 7, name: 'Example' },
 { id: 9, parentId: 7, name: 'Example' },
];
console.log('Results for the array from your example: ', convertArray(array));

我在 sn-ps 中添加了 cmets 来解释它到底做了什么。

Answer 3

它可以帮助你。 :)

const array = [
  { id: 1, parentId: null, name: 'Example' },
  { id: 2, parentId: 1, name: 'Example' },
  { id: 3, parentId: 1, name: 'Example' },
  { id: 4, parentId: 1, name: 'Example' },
  { id: 5, parentId: 2, name: 'Example' },
  { id: 6, parentId: 2, name: 'Example' },
  { id: 7, parentId: 6, name: 'Example' },
  { id: 8, parentId: 7, name: 'Example' },
  { id: 9, parentId: 7, name: 'Example' },
];

const objDict = {};

array.forEach((v, i) => {
  if (!objDict[v.parentId]) objDict[v.parentId] = {};
  objDict[v.parentId].options = objDict[v.parentId].options || [];

  if (!objDict[v.id]) objDict[v.id] = v;
  objDict[v.parentId].options.push(objDict[v.id]);
})

console.log(objDict[null].options);