在 Javascript 中将数据动态重组为树数据

Question

我有一个演员数组，每个演员都有 movies、awards 等数组。我想将从服务器接收到的数据结构更改为树数据。我的数组名称应该在一个新数组 children 中，该数组具有 3 个属性：一个自生成的 id、name，这是我的数组的名称，例如 'movies'，以及 children 其中包含我的数组的实际数据。我需要抢先动态创建它，因为我的数据可以增长。非常感谢任何帮助。

来自服务器的数据结构：

[{
    name: 'Tom Holland',
    id: 1,
    movies: [{
      typename: 'MoviesData',
      id: 12,
      name: 'Spider-Man NWH',
      stars: 4
    }, {
      typename: 'MoviesData',
      id: 13,
      name: 'Spider-Man Far from Home',
      stars: 4
    }],
    awards: [{
      typename: 'AwardsData',
      id: 6,
      name: 'BAFTA Award',
      year: 2017
    }, {
      typename: 'AwardsData',
      id: 7,
      name: 'Empire Award',
      year: 2013
    }], //... more Arrays like Hobbies, TV-Shows, etc...
  }, //... more Actors
]

所需树数据：

[{
    name: "Tom Holland",
    id: 1,
    children: [{
      id: 3, // self generated id for each array
      name: "Movies", // Object key name
      children: [
                   {typename: 'MoviesData', id: 12, name: 'Spider-Man NWH', stars: 4},
                   {typename: 'MoviesData', id: 13, name: 'Spider-Man Far from Home', stars: 4},...
                   ]
    }, {
      id: 15, // self generated id
      name: "Awards",
      children: [
                   {typename:'AwardsData', id: 6, name: 'BAFTA Award', year: 2017},
                   {typename:'AwardsData', id: 7, name: 'Empire Award', value: 2013},...
                   ]
    }, //...]
  }, //...]

Answer 1

下面介绍的是实现所需 objective.

的一种可能方法

代码段

const myTransform = arr => (
  arr.map(
    ({name, id, ...rest}) => ({
      name, id,
      children: [
        ...Object.entries(rest)
        .map(([name, v], idx) => ({
          name,
          id: ++idx,
          // Math.floor(Math.random() * 10),    // if "id" has to be random
          children: v
        }))
      ]
    })
  )
);

/* Code with explanation
// method to transform given array
const myTransform = arr => (
  arr.map(      // iterate using ".map()"
    ({name, id, ...rest}) => ({     // destructure name, id & rest
      name, id,               // keep name, id as-is
      children: [             // transform "rest" into an array
        ...Object.entries(rest)  // "rest" is an object, iterate over its key-value pairs
        .map(([name, v], idx) => ({     // track the index as "idx"
          name,               // transform k-v pair to have "name" prop
          id: ++idx,          // this is the "self-generated" id as needed
          // in case one needs it to be random, instead of "++idx", use below
          // Math.floor(Math.random() * 10),
          children: v         // move the array to nested children
        }))
      ]
    })
  )
);

*/

const dataArr = [{
    name: 'Tom Holland',
    id: 1,
    Movies: [{
      typename: 'MoviesData',
      id: 12,
      name: 'Spider-Man NWH',
      stars: 4
    }, {
      typename: 'MoviesData',
      id: 13,
      name: 'Spider-Man Far from Home',
      stars: 4
    }],
    Awards: [{
      typename: 'AwardsData',
      id: 6,
      name: 'BAFTA Award',
      year: 2017
    }, {
      typename: 'AwardsData',
      id: 7,
      name: 'Empire Award',
      year: 2013
    }], //... more Arrays like Hobbies, TV-Shows, etc...
  }, //... more Actors
];

console.log(
  'transformed array:\n',
  myTransform(dataArr)
);

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

说明

在上面的代码段中添加了内联评论。

在 Javascript 中将数据动态重组为树数据

Restructure data dynamically to treedata in Javascript

javascript

arrays

tree

binary-tree

data-structures