javascript - How to get the sum of number from an array of objects, using pure JS?

Question

I want to show the total number of Likes using only pure JS. I grabbed the numbers from the JSON file but I don't know how to get the Total number of likes, I tried to use reduce method it didn't work maybe i am doing in the wron way

This is what I want to do click here for the photo This is my code

function photographerWork(JsonData, homeElement){
   const homeElt = homeElement.id;
   JsonData.media.forEach(element => {   
   if(homeElt == element.photographerId){
       const domDiv = document.getElementById('photographer-work');
       const newDiv = document.createElement("div");
       /////  the code i'am trying  ////
       const allTheLiks = element.likes
       console.log(allTheLiks)
       //////////////////////
       const workTemplate = `         
           <div class="photo-box"> 
               <div class="photo">
                   ${videoOrImage(element.image, element.video, element)}
               </div>   
               <div class="text">
                   <p> ${element.tags}<b>${element.price} €  &nbsp ${element.likes} <i class="fas fa-heart"></i></b></p>
               </div>
           </div>
           `
       newDiv.innerHTML = workTemplate;
       domDiv.appendChild(newDiv);
       likesAndPrice(element, allTheLiks); 
     }
 })
} 

This is my Result click hereenter code here

This is my JSON file example

 "media": [
      {
        "id": 342550,
        "photographerId": 82,
        "image": "../Photos/Tracy/Fashion_Yellow_Beach.jpg",
        "tags": ["fashion"],
        "likes": 62,
        "date": "2011-12-08",
        "price": 55
      },
      {
        "id": 8520927,
        "photographerId": 82,
        "image": "../Photos/Tracy/Fashion_Urban_Jungle.jpg",
        "tags": ["fashion"],
        "likes": 11,
        "date": "2011-11-06",
        "price": 55
      },
      {
        "id": 9025895,
        "photographerId": 82,
        "image": "../Photos/Tracy/Fashion_Pattern_on_Pattern.jpg",
        "tags": ["fashion"],
        "likes": 72,
        "date": "2013-08-12",
        "price": 55
      },
      {
        "id": 9275938,
        "photographerId": 82,
        "image": "../Photos/Tracy/Event_WeddingGazebo.jpg",
        "tags": ["events"],
        "likes": 69,
        "date": "2018-02-22",
        "price": 55
      },
      {
        "id": 2053494,
        "photographerId": 82,
        "image": "../Photos/Tracy/Event_Sparklers.jpg",
        "tags": ["events"],
        "likes": 2,
        "date": "2020-05-25",
        "price": 55
      },

question from:https://stackoverflow.com/questions/65906795/how-to-get-the-sum-of-number-from-an-array-of-objects-using-pure-js

Answer 1

Before you enter the forEach() create a local variable sum

let sum = 0;

Then inside your forEach() do the following

sum += element.likes;

Then when the loop has finished in sum will be the total amount of likes.

Updated code.

function photographerWork(JsonData, homeElement){
   let sum = 0;
   const homeElt = homeElement.id;
   JsonData.media.forEach(element => {   
   if(homeElt == element.photographerId){
       const domDiv = document.getElementById('photographer-work');
       const newDiv = document.createElement("div");
       /////  the code i'am trying  ////
       const allTheLiks = element.likes
       console.log(allTheLiks)
       //////////////////////

       sum += element.price;

       const workTemplate = `         
           <div class="photo-box"> 
               <div class="photo">
                   ${videoOrImage(element.image, element.video, element)}
               </div>   
               <div class="text">
                   <p> ${element.tags}<b>${element.price} €  &nbsp ${element.likes} <i class="fas fa-heart"></i></b></p>
               </div>
           </div>
           `
       newDiv.innerHTML = workTemplate;
       domDiv.appendChild(newDiv);
       likesAndPrice(element, allTheLiks); 
     }

})
 // here you have the sum now 
    console.log(sum);
}