Problem with API in Javascript

JavaScript
1

I was following one of online tutorials and everything worked fine. But when I added one addition to the page, it doesn’t show up… here is the code:

const app = document.getElementById('root');

const logo = document.createElement('img');
logo.src = 'logo.png';

const container = document.createElement('div');
container.setAttribute('class', 'container');

app.appendChild(logo);
app.appendChild(container);

var request = new XMLHttpRequest();
request.open('GET', 'https://ghibliapi.herokuapp.com/films', true);
request.onload = function () {

  // Begin accessing JSON data here
  var data = JSON.parse(this.response);
  if (request.status >= 200 && request.status < 400) {
    data.forEach(movie => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');

      const h1 = document.createElement('h1');
      h1.textContent = movie.title;

      const h5 = document.createElement('h5');
      h5.textContent = movie.release_date;

      const p = document.createElement('p');
      movie.description = movie.description.substring(0, 300);
      p.textContent = `${movie.description}...`;


	  container.appendChild(card);
      card.appendChild(h1);
      card.appendChild(p);
    });
  } else {
    const errorMessage = document.createElement('marquee');
    errorMessage.textContent = `Gah, it's not working!`;
    app.appendChild(errorMessage);
  }
}

request.send();

I only added this part myself:

      const h5 = document.createElement('h5');
      h5.textContent = movie.release_date;

Could anyone explain me why it doesn’t work?

2

What shows in the console? Are you getting an error message?

3

You have created the element but you have not appended it to the card.

4

yeah, looks like you should add a line: card.appendChild(h5);

5

@ snowmonkey: there was no error in the console
@alhazen1 @MatthewDorner: thanks a lot, that was the problem :slight_smile: