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数组。

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

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

JSFIDDLE：

非常感谢：）

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);

Answer 2

您可以通过分解数据并收集嵌套数组的值来进行映射。

const
    array = [{ 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 }] }],
    result = array.map(({ serviceName: label, dailyTraffic }) =>
        ({ label, data: dailyTraffic.map(({ dataValue }) => dataValue) }));

console.log(result);

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

Answer 3

您需要两个数组映射。

Array.prototype.map()

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
      }
    ]
  }
];

let example = temparray.map(entry => {
  return {
    label: entry.serviceName,
    data: entry.dailyTraffic.map(tf => tf.dataValue)
  }
});

console.log(example);

Answer 4

像这样使用map：

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
      }
    ]
  }
];

let finalResult = temparray.map(x => {
  return {
    label: x.serviceName,
    data: x.dailyTraffic.map(x => x.dataValue)
  }
});

console.log(finalResult);

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

4 个答案: