how to use reduce method in an array of objects

Question

I want to use reduce method in an array of objects, but don't seem to find a way out. The code is below. I don't know how can I access the totalDonation property in the object.

const box=document.querySelector(".wholeBox");
let contribution=[
{name:"charles",
 totalDonation:1000},
 {name:"oliver",
 totalDonation:500},
 {name:"leo",
 totalDonation:300},
];
const totalContribution=contribution.reduce((value,totalValue)=>value + totalValue);
box.innerHTML=totalContribution;

.wholeBox{
    height:300px;
    width:500px;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wholeBox"></div>
    <script src="reduce.js"></script>
</body>
</html>

Please try: box.innerHTML=contribution.reduce((total, {totalDonation}) => totalDonation + total, 0); and share feedback, if any. — jsN00b
– jsN00b, Commented Jun 1, 2022 at 19:20

mhodges · Accepted Answer · 2022-06-01 19:36:27Z

2

You're very close. One thing I noticed is that you swapped the parameters to the .reduce() callback. It goes accumulator (aka total) then current value, you had it flipped. Also, the current value is the actual object of that iteration, so you can access the totalDonation property just like normal with .totalDonation. Lastly, you just need an initial value for the reduce function. This is because .reduce() takes 2 paramters - first it takes a callback function (which you have), and the second parameter is an initial value which will be used as the accumulator value for the first iteration of the loop. Since we are doing a sum, it makes sense to start with 0, hence why we pass 0 in as the initial value to reduce.

const box=document.querySelector(".wholeBox");
let contribution=[
{name:"charles",
 totalDonation:1000},
 {name:"oliver",
 totalDonation:500},
 {name:"leo",
 totalDonation:300},
];
// reduce takes 2 parameters - a callback and an initial value. We provide the callback function
// and 0 as the initial value of the accumulator so we can start from 0 when summing the totals
const totalContribution=contribution.reduce((totalValue, currValue) => {
  // currValue will be the actual object ( i.e. {name: "charles", "totalDonation": 1000} )
  return totalValue + currValue.totalDonation; 
}, 0); // <--- Here is where we provide the initial value for `.reduce()`
box.innerHTML=totalContribution;

<div class="wholeBox"></div>

edited Jun 1, 2022 at 19:36

answered Jun 1, 2022 at 18:50

mhodges

11.2k2 gold badges32 silver badges48 bronze badges

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

2 Comments

Nerdy19 Over a year ago

Thanks for the answer, I understood everything except adding of 0 at the end. Can you please elaborate on why we did that?

mhodges Over a year ago

@Nerdy19 reduce takes 2 parameters. First is a callback function, the second parameter is a starting value (the value of your accumulator on the first iteration). Since we are summing, it makes sense to start at 0 and add from there. That's why we have to pass 0 into reduce as the starting value.

gil · Accepted Answer · 2022-06-01 18:50:25Z

0

here's how u can do it:

let contribution=[
{name:"charles",
 totalDonation:1000},
 {name:"oliver",
 totalDonation:500},
 {name:"leo",
 totalDonation:300},
];

const totalDonations = contribution.reduce((sum, curr) => {
  return curr.totalDonation + sum;
}, 0)
console.log(totalDonations)

in your attempt, you didn't reduce by the specific param that you want to sum upon

answered Jun 1, 2022 at 18:50

gil

2,5731 gold badge23 silver badges31 bronze badges

Comments

Andy · Accepted Answer · 2022-06-01 18:51:57Z

reduce has an accumulator as the first callback argument, and then second argument is the object (in this case) in the current iteration. The accumulator is the variable that gets passed as an argument into the next iteration.

You need to add the object's totalDonation value to the accumulator (total).

And it's always best to define the initial value of the accumulator which in this case is 0.

const box = document.querySelector(".wholeBox");

let contribution=[{name:"charles",totalDonation:1e3},{name:"oliver",totalDonation:500},{name:"leo",totalDonation:300}];

const totalContribution = contribution.reduce((total, current) => {
  return total + current.totalDonation;
}, 0);

box.innerHTML = totalContribution;

<div class="wholeBox"></div>

Abu Siddique · Accepted Answer · 2022-06-01 19:00:08Z

0

Try this: you need to access current value property which is totalDonation.

let contribution=[
    {name:"charles",
     totalDonation:1000},
     {name:"oliver",
     totalDonation:500},
     {name:"leo",
     totalDonation:300},
    ];
    const totalContribution=contribution.reduce((value,curValue)=>value+ curValue.totalDonation,0);  
    console.log(totalContribution);

for reference of reduce function:

answered Jun 1, 2022 at 19:00

Abu Siddique

11 bronze badge

Comments

PeterKA · Accepted Answer · 2022-06-01 19:47:40Z

Just replace the line:

const totalContribution=contribution.reduce((value,totalValue)=>value + totalValue);

With the line:

const totalContribution = contribution.reduce((totalValue,value)=> value.totalDonation + totalValue, 0);

That's all! .... See Demo Below

const box=document.querySelector(".wholeBox");
let contribution=[
{name:"charles",
 totalDonation:1000},
 {name:"oliver",
 totalDonation:500},
 {name:"leo",
 totalDonation:300},
];
const totalContribution=contribution.reduce((totalValue,value)=> value.totalDonation + totalValue,0);
box.innerHTML=totalContribution;

.wholeBox{
    height:300px;
    width:500px;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wholeBox"></div>
    <script src="reduce.js"></script>
</body>
</html>

Ben Stephens · Accepted Answer · 2022-06-01 20:09:16Z

0

If for some reason you don't want to set an initial value for the reduce function you need to make sure the first item in the array can be used as the initial value for the reduce function. In this case you could map the array to an array just containing the totalDonation values. e.g.:

contribution
  .map(({ totalDonation }) => totalDonation)
  .reduce((total, value) => total + value)

answered Jun 1, 2022 at 20:09

Ben Stephens

3,3711 gold badge7 silver badges9 bronze badges

Collectives™ on Stack Overflow

how to use reduce method in an array of objects

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related