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 6
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>2 Comments
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.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
Comments
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>Comments
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:
Comments
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>Comments
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)
box.innerHTML=contribution.reduce((total, {totalDonation}) => totalDonation + total, 0);and share feedback, if any.