Creating an array of objects from an array JS

Question

I have an array of objects. I want to reduce this array of objects based on the property category, so that I can get a total sum of each category. I wrote this function which returns an object:

const expenses =

 [{
      title: 'burger',
      sum: 57,
      category: 'eating_out',
      notes: 'was good',
    },
    {
      title: 'water bill',
      sum: 142.81,
      category: 'utilities',
      notes: 'this sucks',
    },
    {
      title: 'electricity bill',
      sum: 112.90,
      category: 'utilities',
      notes: 'could be worse',
    }]
    
    
    const totalExpensesByCategory = expenses.reduce(
    (acc, curr) => {
      if (!acc[curr.category]) {
        acc[curr.category] = curr.sum;
      } else {
        acc[curr.category] = +acc[curr.category] + curr.sum;
      }
      return acc;
    },
    {}
  );
  
  console.log(totalExpensesByCategory)

I want it to be an iterable object so that I can easily render components based on those entries.

How can I write it differently so that maybe it will return an array of objects that I can use map() on? Object.entries() doesn't seem like the ideal way to do it.

What do you need your output to be?

James
– James

2022-09-07 17:54:49 +00:00
Commented Sep 7, 2022 at 17:54 — James
– James, Commented Sep 7, 2022 at 17:54
preferably an array of objects.

XanderTEM
– XanderTEM

2022-09-07 17:58:07 +00:00
Commented Sep 7, 2022 at 17:58 — XanderTEM
– XanderTEM, Commented Sep 7, 2022 at 17:58

James · Accepted Answer · 2022-09-07 18:04:46Z

3

Since you have valuable info in the object keys (the category) and similar in the values (the sum) you'll need both the key and the value from each object entry to create an array element. One approach is Object.entries, followed by map to create the individual objects that go into the output array.

const expenses =
  
 [{
      title: 'burger',
      sum: 57,
      category: 'eating_out',
      notes: 'was good',
    },
    {
      title: 'water bill',
      sum: 142.81,
      category: 'utilities',
      notes: 'this sucks',
    },
    {
      title: 'electricity bill',
      sum: 112.90,
      category: 'utilities',
      notes: 'could be worse',
    }]


const totalExpensesByCategory = Object.entries(expenses.reduce(
    (acc, curr) => {
      if (!acc[curr.category]) {
        acc[curr.category] = curr.sum;
      } else {
        acc[curr.category] = +acc[curr.category] + curr.sum;
      }
      return acc;
    },
    {}
  )).map(([k, v]) => ({category: k, sum: v}));
  
console.log(totalExpensesByCategory);

answered Sep 7, 2022 at 18:04

James

22.4k5 gold badges29 silver badges44 bronze badges

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

1 Comment

XanderTEM Over a year ago

Could you please help me modify it to also output an id prop for each object? You could assume each object in the original array has one, or generate it in the function if better.

adsy · Accepted Answer · 2022-09-07 17:59:16Z

2

There's no reason not to build it up as an array of objects inside the reduce in the first place:

const totalExpensesByCategory = expenses.reduce(
    (acc, curr) => {
      const categoryIndex = acc.findIndex((category) => category.name === curr.category)
      if (categoryIndex === -1) {
        acc.push({name: curr.category, sum: curr.sum})
      } else {
        acc[categoryIndex].sum = acc[categoryIndex].sum + curr.sum;
      }
      return acc;
    },
    []
  );

Heres the output:

answered Sep 7, 2022 at 17:59

adsy

12k2 gold badges27 silver badges43 bronze badges

2 Comments

XanderTEM Over a year ago

building it like so inside the function is what I was looking for :) Thank you!

adsy Over a year ago

@XanderTEM Nice :). Would you mind marking this answer as accepted? Thanks!

gog · Accepted Answer · 2022-09-07 18:46:58Z

0

Just use Maps instead of objects. That's what they are for. Unlike objects, Maps are iterable:

const totalExpensesByCategory = expenses.reduce(
    (m, curr) =>
        m.set(curr.category, (m.get(curr.category) ?? 0) + curr.sum),
    new Map
);

for (let [category, sum] of totalExpensesByCategory)
    console.log(category, sum)

As a bonus, your reducer looks much nicer without curly braces and return

answered Sep 7, 2022 at 18:46

gog

11.4k2 gold badges29 silver badges42 bronze badges

Collectives™ on Stack Overflow

Creating an array of objects from an array JS

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related