Array push 12 objects instead of 4. Some properties are left empty

Question

The length of the array should be 4 but it pushes 12.

let id = document.querySelector('#product-recommendations')
let items = id.querySelectorAll('.card-img-link img:first-of-type, .card-body p.card-title, .card-body .price span')
    
let arr = [];

items.forEach((elem)=>{
 let obj = {image:'', title:'', price:''};
  if(elem.classList.contains('img-lazy-load')){
    obj.image = elem.src;        
  }else if(elem.classList.contains('card-title')){
    obj.title = elem.innerText;
  }else if(elem.classList.contains('font-weight-light')){
         obj.price = elem.innerText;
  }
     arr.push(obj);
})

Thanks in advance. The array looks like this,

{image: "https://images1", title: "", price: ""}
{image: "", title: "Jeans", price: ""}
{image: "", title: "", price: "59,95 €"}
{image: "https://images2", title: "", price: ""}
{image: "", title: "Wickelrock", price: ""}
{image: "", title: "", price: "64,95 €"}
{image: "", title: "", price: ""}
{image: "", title: "2-reihiger", price: ""}
{image: "", title: "", price: "139,95 €"}
{image: "", title: "", price: ""}
{image: "", title: "Bikerjacke", price: ""}
{image: "", title: "", price: "139,95 €"}

The expected output should be like this,

{image: "https://images1", title: "Jeans", price: "59,95 €"}
{image: "https://images2", title: "Wickelrock", price: "64,95 €"}
{image: "https://images3", title: "2-reihiger", price: "139,95 €"}
{image: "https://images4", title: "Bikerjacke", price: "139,95 €"}

You only have *one* object `obj`, and you keep pushing it to the array. — trincot, Oct 04 '20 at 20:17
You are pushing the `obj` in every iteration at the end. so your array will have the same count of the same object based on the count of items. — Josué Zatarain, Oct 04 '20 at 20:33
obj is declared outside the iteration, so you are modifying the same object in every iteration. So arr will have 12 of the same object. — Josué Zatarain, Oct 04 '20 at 20:33

Array push 12 objects instead of 4. Some properties are left empty

0 Answers0