我从API获取这些数据:

 let dataFromApi = [
    {
      // lots of other props
      name: 'super cool place',
      address: 'address of food place',
      classification: 'food',
    },
    {
      // lots of other props
      name: 'name of tech place',
      address: 'address of tech place',
      classification: 'tech',
    },
    {
      // lots of other props
      name: 'name of clothes place',
      address: 'address of clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another clothes place',
      address: 'address of another clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another tech place',
      address: 'address of another tech place',
      classification: 'tech',
    },
  ]

我想做的是创建一个新的对象数组,它有两件事:

  1. 一个叫做classification的props ;

  2. 一个名为establishments的props ,是一个包含所有与分类props 匹配的机构的对象array.


意思是这样的:

let establishmentsArray = [
    {
      classification: 'food',
      establishments: [
        {
          name: 'name of food place',
          address: 'address of food place',
          classification: 'food',
          // rest of its props
        },
        // Lots of other food places places
      ],
    },
    {
      classification: 'clothes',
      establishments: [
        {
          name: 'name of clothes place',
          address: 'address of clothes place',
          classification: 'clothes',
          // rest of its props
        },
        {
          name: 'name of another clothes place',
          address: 'address of another clothes place',
          classification: 'clothes',
          // rest of its props
        },
        // Lots of other clothes places
      ],
    },
    {
      classification: 'tech',
      establishments: [
        {
          name: 'name of tech place',
          address: 'address of tech place',
          classification: 'tech',
          // rest of its props
        },
        {
          name: 'name of another tech place',
          address: 'address of another tech place',
          classification: 'tech',
          // rest of its props
        },
        // Lots of other tech places
      ],
    },
  ]

提前谢谢你的帮助!

推荐答案

看起来您正在try 按单个字段分组,这是array.reduce的一个很好的用例:

let dataFromApi = [
    {
      // lots of other props
      name: 'super cool place',
      address: 'address of food place',
      classification: 'food',
    },
    {
      // lots of other props
      name: 'name of tech place',
      address: 'address of tech place',
      classification: 'tech',
    },
    {
      // lots of other props
      name: 'name of clothes place',
      address: 'address of clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another clothes place',
      address: 'address of another clothes place',
      classification: 'clothes',
    },
    {
      // lots of other props
      name: 'name of of another tech place',
      address: 'address of another tech place',
      classification: 'tech',
    },
  ]
  
  let output = dataFromApi.reduce((acc, cur) => {
      let { classification, ...rest} = cur;
      let prev = acc.find(x => x.classification === classification);
      if(!prev) {
          acc.push({classification, establishments: [cur]});
      } else {
          prev.establishments.push(cur);
      }
      return acc;
  }, []);
  
  console.log(output);

Javascript相关问答推荐

如何在我的Web应用程序中使用JavaScript显示和隐藏喜欢/不喜欢按钮?

为什么我无法使用useMemo()停止脚本渲染?

如何从defineExpose访问数据和方法

试图为每支球队生成类似于2024/25年欧洲足联冠军联赛瑞士系统格式的独特比赛配对

单击按钮后未清除 Select

使用CDO时如何将Vue组件存储在html之外?

调用SEARCH函数后,程序不会结束

有Angular 的material .未应用收件箱中的价值变化

Vue:ref不会创建react 性属性

在网页上添加谷歌亵渎词

在执行异步导入之前判断模块是否已导入()

我创建了一个创建对象的函数,我希望从该函数创建的对象具有唯一的键.我怎么能做到这一点?

无法使用单击按钮时的useState将数据从一个页面传递到另一个页面

如何在每次单击按钮时重新加载HighChart/设置HighChart动画?

material UI按钮组样式props 不反射

有条件重定向到移动子域

环境值在.js文件/Next.js中不起作用

未加载css colored颜色 ,无法将div设置为可见和不可见

如何用javascript更改元素的宽度和高度?

不同表的条件API端点Reaction-redux