forEach in a API w/Axios

1

How can i pass forEach Loop in Axios to print in console ALL the names of Ghibli Studios’s Movie title with this API wich send me to a JSON file:

https://ghibliapi.herokuapp.com/films (only need title)

I know that axios sintaxis works like this:

axios.get(url)
.then(response => {
    // Data
})
.catch(e => {
    // Errors
})

I been trying many times but it doesn’t work beacuse i don’t know hot to dea with the parameters or if its because is a JSON file.

if you teach me how to do it with Fetch() i will be happy too!

Thanks in advance!

2

Hello!

First of all, i am not confortable using axios, but after playing around with it in codepen, the answer to your question would be, that it gives you back an object and you don’t need to use the .json() method on it to access the data that it contains. In order to print out every movie title the code looks like this:

axios.get(url)
.then(response => {
  response.data.forEach(movie => console.log(movie.title));
})
.catch(err => console.error(err.message));

When you log out the response in the .then() method, you can see it contains an array on the data key that contains the objects for every movie, so you need to us the forEach method on that in order to print all the titles out.

The same code using fetch would look like this:

fetch(url)
.then(response => response.json())
.then(data => {
  data.forEach(movie => console.log(movie.title));
})
.catch(err => console.error(err.message));

The difference is that, when you use fetch the response will be in JSON format, so you
need to use the .json() method first to access the data that the api gives back.

There is a mutch readable way to solve this and that is to use async/await. You can use it with axios and fetch to and the solution would look like:

async function printMovieTitlesWithAxios(url) {
  try{
  const response = await axios.get(url);
  response.data.forEach(film => console.log(film.title));    
  } catch(err) {console.error(err.message)}
}

printMovieTitlesWithAxios(url);

async function printMovieTitlesWithFetch(url) {
  try{
    const response = await fetch(url);
    const data = await response.json();
    data.forEach(film => console.log(film.title));
  } catch(err) {console.error(err.message)}
}

printMovieTitlesWithFetch(url);

With this approach you dont need to use .then() just simple await the promise to resolve or reject and than you can do the loop on the result if it’s resolving or in catch you log out the error when it’s rejecting.

I hope this helps you.

1 Like
3

What a great awnser! blows my mind! i really understand now! i have so mucho to study, thanks for giving me a solution and information.

Thanks!

4

catch(err) {console.error(err.message)}

Don’t do this. Uncaught errors print to the console anyway, but this is just ignoring the error and continuing on with invalid data. It will also strip off the traceback, so you won’t know what calls led up to the error.

I’m supremely annoyed that IDEs continue to put boilerplate in by default that perpetuates this terrible antipattern.

5

Ok, i don’t do it, but can you maybe explain a better way than to handle the error please?

6

If there’s nothing you can do about the error, don’t handle it at all. Crashing is the behavior you want.