Why is my querySelectorAll not working even though I converted it to an array?

Question

querySelectorAll is not working

Hey guys I have been trying to inject some data from my JavaScript file to my index html with DOM manipulation (querySelectorAll) but it is not working.

Note that I have also tried converting nodelist into an array for it to be displayed on html but to no avail, it still does not work. I've spent some time googling for a similar problem but I could not find one.

 const card = document.querySelectorAll('.card-row') const newCard = Array.from(card) const data = [{ topic: 'Food', title: 'Wake Up and Smell the Coffee', price: '$0.90', color: green }, { topic: 'Architecture', title: 'The Brand New NASA Office', price: '$0.19', color: black }, { topic: 'Travel', title: 'Experience the Saharan Sands', price: '$2.29', color: brown }, { topic: 'Interior', title: '9 Air-Cleaning Plants Your Home Needs', price: '$0.09', color: greenblue }, { topic: 'Food', title: 'One Month Sugar Detox', price: '$0.99', color: pink }, { topic: 'Photography', title: 'Shooting Minimal Instagram Photos', price: '$0.29', color: blue } ] data.forEach(info => { card.innerHTML += ` <span>${info.topic}</span> <h3>${info.title}</h3> <p>${info.price}</p> ` })

 .card-row { width: 300px; height: 270px; border-radius: 15px; background-color: tomato; color: #fff; }

 <section class="section"> <div class="container"> <div style='margin: 40px 10px 40px'> <h1>Lifestyle.</h1> <p>The latest and best lifestyle articles selected<br/> by our editorial office. </p> </div> </div> <div class="container"> <div class='card-row'></div> <div class='card-row'></div> <div class='card-row'></div> <div class='card-row'></div> <div class='card-row'></div> <div class='card-row'></div> </div> </section>

Basically, I want my data variable to loop and inject the objects inside my cards. I have tried using only querySelector and of course it works for the first card but that is not what I want to achieve.

I could also give each card an id and manually put each data's object but it is not efficient and I'm trying to avoid long code.

I hope my explanation is clear enough. Thank you in advance!

Answer 1

Assuming you have the same amount amount of .card-row elements as you have entries in data , you can just pass the index as the second parameter in your forEach , and use that to select the correct .card-row element

data.forEach((info, i) => {
  card[i].innerHTML += `
      <span>${info.topic}</span>
      <h3>${info.title}</h3>
      <p>${info.price}</p>
    `
})

Also, there's two other issues:

1. In your example data, you're missing the ' on your color values for them to be treated as Strings (Could just be something you forgot to include)
2. You've defined newCard but then use card for your forEach

 const card = document.querySelectorAll('.card-row') const newCard = Array.from(card) const data = [{ topic: 'Food', title: 'Wake Up and Smell the Coffee', price: '$0.90', color: 'green' }, { topic: 'Architecture', title: 'The Brand New NASA Office', price: '$0.19', color: 'black' }, { topic: 'Travel', title: 'Experience the Saharan Sands', price: '$2.29', color: 'brown' }, { topic: 'Interior', title: '9 Air-Cleaning Plants Your Home Needs', price: '$0.09', color: 'greenblue' }, { topic: 'Food', title: 'One Month Sugar Detox', price: '$0.99', color: 'pink' }, { topic: 'Photography', title: 'Shooting Minimal Instagram Photos', price: '$0.29', color: 'blue' } ]; data.forEach((info, i) => { card[i].innerHTML += ` <span>${info.topic}</span> <h3>${info.title}</h3> <p>${info.price}</p> ` })

 .card-row { width: 300px; height: 270px; border-radius: 15px; background-color: tomato; color: #fff; }

 <div class="container"> <div style='margin: 40px 10px 40px'> <h1>Lifestyle.</h1> <p>The latest and best lifestyle articles selected<br/> by our editorial office. </p> </div> </div> <div class="container"> <div class='card-row'></div> <div class='card-row'></div> <div class='card-row'></div> <div class='card-row'></div> <div class='card-row'></div> <div class='card-row'></div> </div>

Answer 2

Look your data is iterable(something that can be mapped by loop) and your card's array is also an iterable one because you have selected it with querySelectorAll. it returns a iterable node list. So you can not use card.innerHtml directly. Look there is a suggestion for it. Don't make empty .card-row element in Html. Rather generate html in javascript when you iterating over your data array. You can generate html in Javascript with. .createElement(). I think that is much flexible and now you have more control in your code. The code should look something like that:

data.forEach((info) => {
   card = document.createElement('div').classList().add('card-row').innerHTML = `
  <span>${info.topic}</span>
  <h3>${info.title}</h3>
  <p>${info.price}</p>
`; document.querySeletor('.container').append(card);});

I think that is much clearer. (you don't need to select the card at the top)