javascript - JavaScript：使用嵌套数组迭代对象数组

Question

对不起，如果重复了一些问题，但我搜索了很多，没有找到任何东西。

有一个对象数组，包括属性dailyTraffic作为数组：

const temparray = [
  {
    serviceName: 'JSX', 
    dailyTraffic: [
      {day: '01', dataValue: 1000},
      {day: '02', dataValue: 2000},
      {day: '03', dataValue: 3000},
      {day: '04', dataValue: 4000}
    ]
  },
  {
    serviceName: 'XML', 
    dailyTraffic: [
      {day: '01', dataValue: 5589},
      {day: '02', dataValue: 3002},
      {day: '03', dataValue: 6552}
    ]
  }
];

我想要的结果是：

var example = [
  {
    label: 'JSX',
    data: [1000, 2000, 3000, 4000]
  },
  {
    label: 'XML',
    data: [5589, 3002, 6552]
  }
];

对象数组，包括serviceName作为标签的对象，以及dataValue数组中的所有他的 s。

我尝试使用Array#map，但停留在嵌套数组的迭代上

let check = temparray.map((item) => {    
  customObj.label = item.serviceName;
  console.log(customObj);      
  customArray.push(customObj);
});

JSFIDDLE：

非常感谢 ：）

标签： javascript

Answer 1

您必须在第一个数组上循环，然后在dailyTraffic数组上循环。

const temparray = [{
    serviceName: 'JSX',
    dailyTraffic: [{
        day: '01',
        dataValue: 1000
      },
      {
        day: '02',
        dataValue: 2000
      },
      {
        day: '03',
        dataValue: 3000
      },
      {
        day: '04',
        dataValue: 4000
      },
    ],
  },
  {
    serviceName: 'XML',
    dailyTraffic: [{
        day: '01',
        dataValue: 5589
      },
      {
        day: '02',
        dataValue: 3002
      },
      {
        day: '03',
        dataValue: 6552
      },
    ],
  },
];

// Array.map will loop on every entry of the temparray and build a new
// array using the returned values

// To know about :

// We are using destructuring
//
// Doing : 
//
// ({
//  serviceName,
//  dailyTraffic,
// }) => {
//   // access the data directly
//   console.log(serviceName);
// }
//
// is equivalent to
//
// (x) => {
//   // access the data indirectly
//   console.log(x.serviceName);
// },

// To know about :

// This
//
// x => 8;
//
// is equivalent to
//
// (x) => {
//   return 8;
// }
//

// So, we are looping on every temparray value and then build a new one
// We are using the serviceName as the label
// We are using an other Map to loop on dailyTraffic to extract the dataValues from it
const ret = temparray.map(({
  serviceName,
  dailyTraffic,
}) => ({
  label: serviceName,

  dailyTraffic: dailyTraffic.map(y => y.dataValue),
}));

console.log(ret);