react js如何创建数组组合？答案

【问题标题】：How to create a combination of array is react js?react js如何创建数组组合？
【发布时间】：2021-03-27 20:23:15
【问题描述】：

我需要创建一个数组组合。

我有这样的数据，我需要为图表系列安排数据

[
   {
      "movingDuration":10,
      "parkedDuration":15,
   },
   {
      "movingDuration":15,
      "parkedDuration":23,
   },
   {
      "movingDuration":43,
      "parkedDuration":26,
   },
   {
      "movingDuration":67,
      "parkedDuration":21,
   },
   {
      "movingDuration":47,
      "parkedDuration":54,
   }
]

我希望通过以下方法得到这样的结果

[
   {
      "name":"Moving Duration",
      "data":[
         10,
         15,
         43,
         67,
         47
      ]
   },
   {
      "name":"Parked Duration",
      "data":[
         15,
         23,
         26,
         21,
         54
      ]
   }
]

任何帮助将不胜感激。谢谢

【问题讨论】：

标签： arrays reactjs arraylist multidimensional-array

【解决方案1】：

这有帮助吗？

const arr = [
    {
      movingDuration: 10,
      parkedDuration: 15
    },
    {
      movingDuration: 15,
      parkedDuration: 23
    },
    {
      movingDuration: 43,
      parkedDuration: 26
    },
    {
      movingDuration: 67,
      parkedDuration: 21
    },
    {
      movingDuration: 47,
      parkedDuration: 54
    }
  ];

  const resultArray = [{ name: 'Moving Duration', data: [] }, { name: 'Parked Duration', data: [] }];

  arr.forEach((ele) => {
    resultArray[0].data.push(ele.movingDuration);
    resultArray[1].data.push(ele.parkedDuration);
  });

【讨论】：

【解决方案2】：

通过数组 reduce 运行数据以按属性键分组，然后将其映射到所需的结果对象格式。

const formattedData = data.reduce((data, current) => {
  Object.entries(current).forEach(([key, value]) => {
    data[key] = [...(data[key] ?? []), value];
  });
  return data;
}, {});

const finalData = Object.entries(formattedData).map(([name, data]) => ({
  name,
  data
}));

const data = [
  {
    movingDuration: 10,
    parkedDuration: 15
  },
  {
    movingDuration: 15,
    parkedDuration: 23
  },
  {
    movingDuration: 43,
    parkedDuration: 26
  },
  {
    movingDuration: 67,
    parkedDuration: 21
  },
  {
    movingDuration: 47,
    parkedDuration: 54
  }
];

const formattedData = data.reduce((data, current) => {
  Object.entries(current).forEach(([key, value]) => {
    data[key] = [...(data[key] ?? []), value];
  });
  return data;
}, {});

const finalData = Object.entries(formattedData).map(([name, data]) => ({
  name,
  data
}));

console.log(finalData);

【讨论】：

【解决方案3】：

如果这有帮助，请告诉我。

const origData=[
   {
      "movingDuration":10,
      "parkedDuration":15,
   },
   {
      "movingDuration":15,
      "parkedDuration":23,
   },
   {
      "movingDuration":43,
      "parkedDuration":26,
   },
   {
      "movingDuration":67,
      "parkedDuration":21,
   },
   {
      "movingDuration":47,
      "parkedDuration":54,
   }
]

const cols=Object.keys(origData[0])
const result=cols.map(item=>{
const data=origData.map(i=>i[item])
  return {name:item,data}
})
console.log(result)

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

【讨论】：

【解决方案4】：

let data = [
   {
  "movingDuration":10,
  "parkedDuration":15,
   },
   {
  "movingDuration":15,
  "parkedDuration":23,
   },
   {
  "movingDuration":43,
  "parkedDuration":26,
   },
   {
  "movingDuration":67,
  "parkedDuration":21,
   },
   {
  "movingDuration":47,
  "parkedDuration":54,
   }
]

let sol = {}

data.forEach(d => {
  let keys = Object.keys(d);
  if(sol[keys[0]]){
sol[keys[0]] = [...sol[keys[0]], d[keys[0]]]
sol[keys[1]] = [...sol[keys[1]], d[keys[1]]]
  }else{
sol[keys[0]] = [].concat(d[keys[0]])
sol[keys[1]] = [].concat(d[keys[1]])
  }
})

let final = Object.keys(sol).map(key =>{
  let temp = {}
  temp["name"] = key
  temp["data"] = sol[key]
  return temp
})

console.log(final)

【讨论】：

【解决方案5】：

我们可以使用reduce()方法创建一个对象，用Object.values()从对象中获取值：

const result = data.reduce((a, c) => {
    for (const key in c) {
        a[key] = a[key] || {name: key, data: []};
        a[key].data.push(c[key]);
     }
    return a;
}, {})

console.log(Object.values(result));

一个例子：

let data = [
    {
       "movingDuration":10,
       "parkedDuration":15,
    },
    {
       "movingDuration":15,
       "parkedDuration":23,
    },
    {
       "movingDuration":43,
       "parkedDuration":26,
    },
    {
       "movingDuration":67,
       "parkedDuration":21,
    },
    {
       "movingDuration":47,
       "parkedDuration":54,
    }
 ]


const result = data.reduce((a, c) => {
    for (const key in c) {
        a[key] = a[key] || {name: key, data: []};
        a[key].data.push(c[key]);
     }
    return a;
}, {})

console.log(Object.values(result));

【讨论】：