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>
6 answers
solution1
2 2022-06-01 18:50:51
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 ( ie {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>
solution2
0 2022-06-01 18:50:25
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
solution3
0 2022-06-01 18:51:57
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>
solution4
0 2022-06-01 19:00:08
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 :
solution5
0 2022-06-01 19:47:40
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>
solution6
0 2022-06-01 20:09:16
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. eg:
contribution
.map(({ totalDonation }) => totalDonation)
.reduce((total, value) => total + value)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.