在JavaScript中动态重组数据到Treedata

Question

我有一系列演员，每个演员都有电影，奖励等数组。我想将从服务器收到的数据的结构更改为树数据。我的数组名称应在新数组儿童中具有3个属性：一个自生生成id，name哪个是我的数组的名称示例“电影”和儿童包含我数组的实际数据。我需要一个人开始动态创建此功能，因为我的数据可以增长。任何帮助都非常感谢。

服务器的数据结构：

[{
    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

下面介绍的是实现预期目标的一种可能方法。

代码片段

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 }

说明

内联注释上面添加了上述片段。