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>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>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
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>