Question 207952 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I reduce an array of objects based on prop name?

I’m trying to turn:

  Array(19) [
{ category: 'Entertainment', 'Hang with Friends': 100 }, 
{ category: 'Entertainment', Chill: 30 }, 
{ category: 'Health', Yoga: 40 },
{ category: 'Health', Birthday: 200 }, 
   ]

into:

  Array(19) [
{ category: 'Entertainment', 'Hang with Friends': 100, Chill: 30 }, 
{ category: 'Health', Yoga: 40, Birthday: 200 },
   ]

I attempted to do it using the logic from my last question but that one was reduced based on a prop that was a number, so I could index it. Here, I’m trying to do it based off of the category prop which is a string and can’t be used to index.

I tried the following, but it doesn’t work at all:

  const reducedData = Object.values(newData).reduce(
    (index, { id, category, subCategory, price }) => {
      Object.assign((index[category] ??= category), {
        [subCategory]: price,
      });
      return index;
    },
    {}
  );

I want to be able to loop through the other objects in the array to find the obj with the correct category prop but I’m not sure how to do that.

Any help would be great!

Also, I’ve changed the format to the following because it was mentioned that it’s easier to work with. How would you the same to the following?

  Array(19) [
{ category: 'Entertainment', subCategory: 'Hang with Friends', price: 100 }, 
{ category: 'Entertainment', subCategory: 'Chill', price: 30 }, 
{ category: 'Health', subCategory: 'Yoga', price: 40 },
{ category: 'Health', subCategory: 'Birthday', price: 200 }, 
   ]
Tags:

2

Answers


  1. 0

    You can use Array#reduce with an object that stores the merged object using the category as the key.

    const arr=[{category:"Entertainment","Hang with Friends":100},{category:"Entertainment",Chill:30},{category:"Health",Yoga:40},{category:"Health",Birthday:200},];
const res = Object.values(arr.reduce((acc, curr) =>
  (Object.assign(acc[curr.category] ??= {}, curr), acc), {}));
console.log(res);

    You can use a type assertion for the accumulator in TypeScript:

    const res = Object.values(arr.reduce((acc, curr) =>
 (Object.assign(acc[curr.category] ??= {}, curr), acc), {} as Record<string, unknown>));

    Or you can set the generic type parameter for reduce:

    arr.reduce<Record<string, unknown>>(...)
    Login or Signup to reply.
  2. 0 
    let arr = [{
    category: 'Entertainment',
    'Hang with Friends': 100
  },
  {
    category: 'Entertainment',
    Chill: 30
  },
  {
    category: 'Health',
    Yoga: 40
  },
  {
    category: 'Health',
    Birthday: 200,
  },
];

let data1 = arr.map(({
  category
}) => category);

let data2 = [];
arr.forEach((e, index, arr) => {
  if (data1.includes(e.category, index + 1)) {
    data2.push({ ...e,
      ...arr[index + 1]
    })
  }

});
console.log(data2);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search