How to make a call to an URL, pass the JSON it returns to a function and loop through the results to log names

Question

Make a call to the URL below, pass the JSON it returns to a function and inside that function loop through the results and log each game's name.

In the catch method of your code, redirect to error.html if there is an error.

https://api.rawg.io/api/games?genres=sports

This is a question I'm trying to solve. I have this as of yet but have gotten stuck. I'm unsure as to how I should loop the JSON in a function to get only the names as the assignment asks for.

Because 'fetch' is built on promises, and a successfull call will be handled by a 'then' method, is 'data' the function argument? which means I have the function already?

    const Url = `https://api.rawg.io/api/games?genres=sports`;

fetch(Url)
  .then(data => {
    return data.json();
  })
  .then(Response => {
    console.log(Response);
  });

I'm unsure as to how I should loop the JSON in a function to get only the names. It's my first time posting a question and three weeks in a javascript course so I realize I didn't write the question very well. Sorry about that. — Jonas, Feb 05 '20 at 14:27
Don't worry, just edit your question with more information about what you have already done and describe more explicit with more details what your problem is. — mrzo, Feb 05 '20 at 14:31
Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Sim, Feb 05 '20 at 15:06

Buddy Christ · Accepted Answer · 2020-02-05T15:00:21.040

I would use map to get only the names:

function loadData() {
   return new Promise((resolve, reject) => {
      const url = `https://api.rawg.io/api/games?genres=sports`;
      fetch(url)
        .then(data => data.json())
        .then(response => {
           resolve(response.results.map( game => {
             return game.name;
           }));
        });
   });
}


loadData().then(data => {
   console.log(data); // here you have only the names
}).catch( error => {
   window.location.href = "error.html "; // an error has happened
});

about your question then gets a funtion and you are writing it as an arrow function so data is the argument (but you can name it as you want).

When you write:

data => {
    return data.json();
}

this is the same as:

function(data) {
    return data.json();
}

Except for old browsers in which arrow functions don't work in some of them.

robinalaerts · Answer 2 · 2020-02-05T14:40:41.200

When parsing the response as JSON you will have a JS object with the same structure as the JSON data.

const url = `https://api.rawg.io/api/games?genres=sports`;

fetch(url)
  .then(data => {
    return data.json()
  })
  .then(response => {
    const games = response.results;
    return games.map(game => game.name);
  })
  .then(gameNames => /*do something with the list*/);

or shorter notation

const url = `https://api.rawg.io/api/games?genres=sports`;

const gameNames = await fetch(url)
  .then(data => data.json())
  .then(response => response.results.map(game => game.name);

How to make a call to an URL, pass the JSON it returns to a function and loop through the results to log names

2 Answers2