0

Link to javascript code

Link to my Object

For HTML I have only a simple div with a 'works' class and want to generate a list of cards dynamically. For now, I can access other classes easily using selectors in javascript but I am unable to select the class that I have in javascript function. What can I do to solve this problem?

    const handleGetJson = () => {
  const work = document.getElementById('works');

  fetch(`data.json`, {
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
  })
    .then((response) => response.json())
    .then((messages) => {
      const data = Object.values(messages);

      let container = '';

      data.forEach((item) => {
        const {
          title,
          description,
          technologies,
          image,
          link,
          linkText,
          link2,
          linkText2,
          id,
        } = item;

        const techno = Object.values(technologies);
        container =
          container +
          `
          <div class="card-${id}">
        <div class="card-1-2">
        <div class="image-container${id}"></div>
      </div>
      <div class="card-1-1">
        <h2 class="titre">${title}</h2>
        <ul>
          <li class="cano">CANOPY</li>
          <li class="dot empty"></li>
          <li class="dot">Back End Dev</li>
          <li class="dot empty"></li>
          <li class="dot">2015</li>
        </ul>
        <p class="desc">
          ${description}
        </p>
        <ul class="skills">
          <li>${techno[0]}</li>
          <li>${techno[1]}</li>
          <li>${techno[2]}</li>
          <li>${techno[3]}</li>
        </ul>
        <button type="button" class="btn-tonic">See project</button>
      </div>
      </div>
        `;
        work.innerHTML = container;
      });
    });
};
handleGetJson();

// pop up modal

const close = document.getElementsByClassName('close-modal')[0];
const modal = document.getElementById('popup');
const btn = document.querySelectorAll('.btn-tonic'); // unable to get all the buttons in the dynamically generated cards get all buttons

console.log(btn); // empty Nodelist




// HTML CODES

<section id="works" class="works"></section>
Mwafrika Josue
  • 17
  • 6
  • 1
    Your `querySelectorAll` executes without waiting for the HTTP response to come back. The `then` callbacks have not yet executed. You need to do this selection in a `then` callback or use any other way to work with promises. – trincot Jan 26 '22 at 20:35
  • Thank you for your response. At which level should I add the async and await keywords? – Mwafrika Josue Jan 26 '22 at 20:39
  • 1
    You want to use `await`? Then stop using `then` first. I think that makes the question too broad. Just put the code (that needs the response) in the `then` callback, or call it from there. – trincot Jan 26 '22 at 20:45
  • 1
    Thank you so much, brother. It worked for me. – Mwafrika Josue Jan 26 '22 at 20:56

0 Answers0