Manipulate Object with JS

Question

I have this object:

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'}]
}

I need to create another object that looks like this:

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

The object above is for a chartJs. The data array in the datasets array, correspont to each value for the product per month.

Thank you in advance

The labels are Object.keys(data). The datasets are grouped. You can find dozens of duplicates. — user16540390
– user16540390, Commented May 10, 2022 at 11:34
What have you tried and what didn't work as expected? I imagine you could get your labels from the keys in the object you have. And you could loop over the data you have (maybe more than once) to build your datasets and the data within them. — David
– David, Commented May 10, 2022 at 11:35
Yes, the labels are fine with Object.keys(). I have tried looping with a for in, but I am failing to see how to build up the datasets — Kris
– Kris, Commented May 10, 2022 at 11:36

Sajeeb Ahamed · Accepted Answer · 2022-05-10 12:09:36Z

1

You can create the dataset using Array.prototype.reduce and create the new data array.

Note that you have to flatten the array as the Object.values(data) gives you an array of array.

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

edited May 10, 2022 at 12:09

answered May 10, 2022 at 11:43

Sajeeb Ahamed

6,4482 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kris Over a year ago

Thank you @Sajeeb. I will spent all the time I need to understand this, and learnt from it.

Sajeeb Ahamed Over a year ago

I've just write some comments so that you could understand easily.

Collectives™ on Stack Overflow

Manipulate Object with JS

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related