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

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);
} 

const 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
  }
];

const response = media.reduce((total, { likes }) => {
  total += likes;
  return total;
}, 0);

console.log(`total likes: ${response}`);

you can use reduce function and do something like that:

const response = media.reduce((total, { likes }) => {
  total += likes;
  return total;
}, 0);

Assuming jsonData to be the variable holding your data.

var totalLikes =  jsonData.media.reduce((acc, cur) => (true, {likes: acc.likes + cur.likes})).likes

A great one liner to do the task. There are two ways - one that @Kidas has posted and mine - which just reduces in such a way that a JSON object is maintained throughout the reduce and the later accessing that. If you don't like to use the ES6 syntax - just replace the arrow function with a function

var totalLikes =  jsonData.media.reduce(function (acc, cur) {
    return (true, {likes: acc.likes + cur.likes})
}).likes

You need to add the likes eachtime you render a card(i.e: object). I have added a variable combinedLikes and adding the likes each time.

cheers :)

function photographerWork(JsonData, homeElement){
   const homeElt = homeElement.id;
   let combinedLikes = 0;
   JsonData.media.forEach(element => {   
   if(homeElt == element.photographerId){
       const domDiv = document.getElementById('photographer-work');
       const newDiv = document.createElement("div");
       /////  the code i'am trying  ////
       combinedLikes += 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, combinedLikes); 
     }
 })
}