How to know what to target when trying to parse and store JSON data from an API

Question

So I'm relatively new to javascript, and followed this tutorial in API linking, but there's one thing I'm confused about.

Here's my 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 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();

and here's the link to the JSON data querying the API will give you https://ghibliapi.herokuapp.com/films/

So the one thing I'm confused about is this line, and subsequent lines containing movie.something

data.forEach(movie => {

I don't understand why you would use "movie" It's not defined in the code or the actual JSON, so how would you know that it's "movie.description" instead of something like "film.description"? I'm sure that if I can figure this out it's the key to working with other API's and referencing their data.

Can anyone help me?

(Also, here's the actual API documentation, https://ghibliapi.herokuapp.com/#)

You can name the argument to the `forEach` method anything you want — Dexygen, Oct 15 '18 at 19:50
Possible duplicate of [When should I use Arrow functions in ECMAScript 6?](https://stackoverflow.com/questions/22939130/when-should-i-use-arrow-functions-in-ecmascript-6) — Sam Hartman, Oct 15 '18 at 19:51

score 1 · Accepted Answer · answered Oct 15 '18 at 19:46

1

movie is the argument for the arrow function. It can be called almost anything you want. data is an array, so forEach is available.

That line is like data.forEach(function(movie) { ... }.bind(this));

answered Oct 15 '18 at 19:46

Daniel A. White

174,715
42
343
413

Oh, I see, thanks! One more thing, why wouldn't you fully enclose it in brackets though, it seems an odd little detail... – Dr Bracewell Oct 15 '18 at 19:50
@DrBracewell it is. – Daniel A. White Oct 15 '18 at 19:51

score 0 · Answer 2 · answered Oct 15 '18 at 19:49

If what you are really looking for is the ability to inspect what property values are available on the movie variable, you can print the variable to the console and inspect it further from there.

console.log(movie)

And to open up the console, right click on your web application from your web browser and choose "dev tools" or "inspect" (it varies depending on what browser you use).

How to know what to target when trying to parse and store JSON data from an API

2 Answers2