用 JS 操作对象

Question

我有这个对象：

const data = {
    Jan: [{product: 'Shirt', num: '13'}, {product: 'Shoes', num: '15'}],
    Feb: [{product: 'Shirt', num: '22'}, {product: 'Shoes', num: '1'}],
    Mar: [{product: 'Shirt', num: '15'}, {product: 'Shoes', num: '25'}]
}

我需要创建另一个如下所示的对象：

const data = {
    labels: ['Jan', 'Feb', 'Mar'],
    datasets: [
    {
        label: 'Shirt',
        data: [13, 22, 15]
    },
    {
        label: 'Shoes',
        data: [15, 1, 25]
    }
    ]
  }

上面的对象是一个chartJs。 datasets数组中的data数组，对应产品每个月的每个值。

提前致谢

Answer 1

您可以使用 Array.prototype.reduce 创建数据集并创建新数据数组。

请注意，您必须将数组展平，因为 Object.values(data) 为您提供了一个数组数组。

const data = {
    Jan: [{product: 'Shirt', num: '13'}, {product: 'Shoes', num: '15'}],
    Feb: [{product: 'Shirt', num: '22'}, {product: 'Shoes', num: '1'}],
    Mar: [{product: 'Shirt', num: '15'}, {product: 'Shoes', num: '25'}]
};

// Iterate through the data object's value and flatten this
// For example the Object.values(data) will provide you-
// [[{product: 'shirt', num: '13'}, {product: 'Shoes', num: '15'}], [{product: 'Shirt', num: '22'}, {product: 'Shoes', num: '1'}]] so on and so forth
// Need to make this a linear array using flat(1)

const dataset = Object.values(data).flat(1).reduce((acc, curr) => {

  // Check if the product exists on the accumulator or not. If not then create a new
  // object for the product.
  // For example, this will create - {'Shirt': {label: 'Shirt', data: [13]}}
  if (acc[curr.product] === undefined) {
    acc[curr.product]  = {
      label: curr.product,
      data: [Number(curr.num)]
    }
  } else {
    // If the product already exists then push the num to the data array
    acc[curr.product].data.push(Number(curr.num))
  }
  
  return acc;
}, {});



const newData = {
  labels: Object.keys(data), // Set the keys as the labels
  dataset: Object.values(dataset) // dataset is an object, just extract the values as an array
}

console.log(newData);

.as-console-wrapper{ min-height: 100vh!important; top: 0;}

用 JS 操作对象

Manipulate Object with JS

javascript

arrays

object