将对象数组分类为新数组答案

【问题标题】：Categorize array of objects into a new array将对象数组分类为新数组
【发布时间】：2023-03-30 07:50:01
【问题描述】：

我有一个数组，我需要将这个数组映射到它的子数组中。

var data = [{
    name: 'Cars',
    content: 'BMW',
    value: 2000
  },
  {
    name: 'Cars',
    content: 'Fiat',
    value: 542
  },
  {
    name: 'Cars',
    content: 'Mercedes',
    value: 745
  },
  {
    name: 'Cars',
    content: 'Toyota',
    value: 965
  },
  {
    name: 'Cars',
    content: 'Honda',
    value: 754
  }, {
    name: 'Cars',
    content: 'VW',
    value: 123
  },
  {
    name: 'Cars',
    content: 'Ford',
    value: 200
  },
  {
    name: 'Fruits',
    content: 'Apple',
    value: 500
  }, {
    name: 'Fruits',
    content: 'Orange',
    value: 769
  }, {
    name: 'Fruits',
    content: 'Banana',
    value: 120
  }, {
    name: 'Fruits',
    content: 'Strawberry',
    value: 48
  }, {
    name: 'Fruits',
    content: 'Mango',
    value: 653
  },
  {
    name: 'Colors',
    content: 'Red',
    value: 965
  }, {
    name: 'Colors',
    content: 'Black',
    value: 931
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 423
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 964
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 436
  }
]

我想要的最终结果一定是这样的：

[
  {
    name: "Children Array",
    children: [
      {
        name: "Cars",
        children: [
          {
            name: "BMW",
            value: 2000
          }, 
          {
            name: "Fiat",
            value: 542
          }, 
          {
          ...
          }
        ]
      },
      {
        name: "Fruits",
        children: [
          {
            name: 'Apple',
            value: 500
          }, 
          {
            name: 'Orange',
            value: 769
          }, 
          {
            ...
          }
        ]
      }, 
      {
        name: "Colors",
        children: [
          {
            name: 'Red',
            value: 965
          }, 
          {
            ...
          }
        ]
      }
    ]
  }
]

这就是我所做的。

var data = [{
    name: 'Cars',
    content: 'BMW',
    value: 2000
  },
  {
    name: 'Cars',
    content: 'Fiat',
    value: 542
  },
  {
    name: 'Cars',
    content: 'Mercedes',
    value: 745
  },
  {
    name: 'Cars',
    content: 'Toyota',
    value: 965
  },
  {
    name: 'Cars',
    content: 'Honda',
    value: 754
  }, {
    name: 'Cars',
    content: 'VW',
    value: 123
  },
  {
    name: 'Cars',
    content: 'Ford',
    value: 200
  },
  {
    name: 'Fruits',
    content: 'Apple',
    value: 500
  }, {
    name: 'Fruits',
    content: 'Orange',
    value: 769
  }, {
    name: 'Fruits',
    content: 'Banana',
    value: 120
  }, {
    name: 'Fruits',
    content: 'Strawberry',
    value: 48
  }, {
    name: 'Fruits',
    content: 'Mango',
    value: 653
  },
  {
    name: 'Colors',
    content: 'Red',
    value: 965
  }, {
    name: 'Colors',
    content: 'Black',
    value: 931
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 423
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 964
  }, {
    name: 'Colors',
    content: 'BMW',
    value: 436
  }
]

const layer1 = _.uniqWith(_.map(data, (item) => {
  return item.name
}), _.isEqual)

const newArray = [{
  name: 'Children Array',
  children: _.map(layer1, (item) => {
    return {
      name: item,
      children: _.map(data, (item) => {
        return {

        }
      })
    }
  })
}]

console.log(newArray)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"&gt;&lt;/script&gt;

我不知道如何处理第二个子层。

请指教。

【问题讨论】：

你不应该为每个孩子return { name: item.content, value: item.value }吗？
我猜不是。我需要将此值与 layer1 值进行比较，过滤掉数据并映射它们。但不知道该怎么做。

标签： javascript arrays lodash

【解决方案1】：

您可以对数据进行分组并为结果提供最终布局。

var data = [{ name: 'Cars', content: 'BMW', value: 2000 }, { name: 'Cars', content: 'Fiat', value: 542 }, { name: 'Cars', content: 'Mercedes', value: 745 }, { name: 'Cars', content: 'Toyota', value: 965 }, { name: 'Cars', content: 'Honda', value: 754 }, { name: 'Cars', content: 'VW', value: 123 }, { name: 'Cars', content: 'Ford', value: 200 }, { name: 'Fruits', content: 'Apple', value: 500 }, { name: 'Fruits', content: 'Orange', value: 769 }, { name: 'Fruits', content: 'Banana', value: 120 }, { name: 'Fruits', content: 'Strawberry', value: 48 }, { name: 'Fruits', content: 'Mango', value: 653 }, { name: 'Colors', content: 'Red', value: 965 }, { name: 'Colors', content: 'Black', value: 931 }, { name: 'Colors', content: 'BMW', value: 423 }, { name: 'Colors', content: 'BMW', value: 964 }, { name: 'Colors', content: 'BMW', value: 436 }],
    result = _(data)
        .groupBy('name')
        .map((group, name) => 
            ({ name, children: _.map(group, ({ content: name, value }) => ({ name, value })) }))
        .value(),
    final = [{ name: "Children Array", children: result }];

console.log(final);

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

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"&gt;&lt;/script&gt;

【讨论】：

【解决方案2】：

您也可以仅通过Object.entries 和reduce 使用 ES6：

var data = [{ name: 'Cars', content: 'BMW', value: 2000 }, { name: 'Cars', content: 'Fiat', value: 542 }, { name: 'Cars', content: 'Mercedes', value: 745 }, { name: 'Cars', content: 'Toyota', value: 965 }, { name: 'Cars', content: 'Honda', value: 754 }, { name: 'Cars', content: 'VW', value: 123 }, { name: 'Cars', content: 'Ford', value: 200 }, { name: 'Fruits', content: 'Apple', value: 500 }, { name: 'Fruits', content: 'Orange', value: 769 }, { name: 'Fruits', content: 'Banana', value: 120 }, { name: 'Fruits', content: 'Strawberry', value: 48 }, { name: 'Fruits', content: 'Mango', value: 653 }, { name: 'Colors', content: 'Red', value: 965 }, { name: 'Colors', content: 'Black', value: 931 }, { name: 'Colors', content: 'BMW', value: 423 }, { name: 'Colors', content: 'BMW', value: 964 }, { name: 'Colors', content: 'BMW', value: 436 }]

const groupData = (d) => {
  let g = Object.entries(d.reduce((r,c)=>(r[c.name]=[...r[c.name]||[], c],r),{}))
  return g.reduce((r,c) => (r.children.push(
     {name: c[0], children: c[1]}), r),{name: "Children Array", children:[]})}

console.log(groupData(data))

这个想法是通过第一个分组来获得带有name groups 的对象，然后您只需在该对象上获得entries 并在它们上获得reduce 以获得最终结果。

您还可以使用预定义的对象等开始主要减少。

【讨论】：