how to use reduce method in an array of objects-CodePudding

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 ></div>
    <script src="reduce.js"></script>
</body>
</html>

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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:

CodePudding user response：

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 ></div>
    <script src="reduce.js"></script>
</body>
</html>

CodePudding user response：

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)