Console keeps giving me "index.js:6 Uncaught (in promise) TypeError: response is not iterable". After racking my brain I realised that an object I'm dealing with (still a beginner), which means the likes of "for loop", "forEach", "for of" won't work. The object in question contains two items. I want to access the second one which is an array named "data" so I can iterate over it using a for loop", or "forEach".

const anime = "https://anime-facts-rest-api.herokuapp.com/api/v1"

fetch(anime)
.then(res => res.json())
.then(response => {
  console.log(response);
  for (let {anime_img} of response) {
    console.log(anime_img)
  }
})

CodePudding user response：

As you said, you need to get the data array from response which is an object using response.data and you can then loop using forEach() or for ... of .

const anime = "https://anime-facts-rest-api.herokuapp.com/api/v1"

fetch(anime)
.then(res => res.json())
.then(response => {
  // response is an object but we need the array in property data
  const data = response.data;
  for (let anime_img of data) {
    console.log(anime_img)
  }
  // alternative
  //data.forEach(item => console.log(item));
})

.as-console-wrapper { max-height: 100% !important; top: 0; }

If you want to use object destructuring. you can do that as well.

Please note: I've hardcoded the data your API returns here.

const apiData = {
  success: true,
  data: [
    {
      anime_id: 1,
      anime_name: "bleach",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BZjE0YjVjODQtZGY2NS00MDcyLThhMDAtZGQwMTZiOWNmNjRiXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_FMjpg_UX1000_.jpg",
    },
    {
      anime_id: 2,
      anime_name: "black_clover",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BNTAzYTlkMWEtOTNjZC00ZDU0LWI5ODUtYTRmYzY0MTAzYWZlXkEyXkFqcGdeQXVyMzgxODM4NjM@._V1_FMjpg_UX1000_.jpg",
    },
    {
      anime_id: 3,
      anime_name: "dragon_ball",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BMGMyOThiMGUtYmFmZi00YWM0LWJiM2QtZGMwM2Q2ODE4MzhhXkEyXkFqcGdeQXVyMjc2Nzg5OTQ@._V1_FMjpg_UX1000_.jpg",
    },
    {
      anime_id: 4,
      anime_name: "jujutsu_kaisen",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BNzQyYzU3Y2MtOWY2Yy00ZGM2LTg3ZTUtMDJkZTJiMmEzMjYxXkEyXkFqcGdeQXVyMTI2NTY3NDg5._V1_.jpg",
    },
    {
      anime_id: 5,
      anime_name: "fma_brotherhood",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BZmEzN2YzOTItMDI5MS00MGU4LWI1NWQtOTg5ZThhNGQwYTEzXkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_.jpg",
    },
    {
      anime_id: 6,
      anime_name: "naruto",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BZmQ5NGFiNWEtMmMyMC00MDdiLTg4YjktOGY5Yzc2MDUxMTE1XkEyXkFqcGdeQXVyNTA4NzY1MzY@._V1_.jpg",
    },
    {
      anime_id: 7,
      anime_name: "gintama",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BMDkxZTJjZTEtMDRjMy00Yzk1LWI5YjItMjIwYmVlYzhlZWZhXkEyXkFqcGdeQXVyNDQxNjcxNQ@@._V1_FMjpg_UX1000_.jpg",
    },
    {
      anime_id: 8,
      anime_name: "itachi_uchiha",
      anime_img:
        "https://comicvine.gamespot.com/a/uploads/scale_small/0/378/859934-god2vj0xj3.jpg",
    },
    {
      anime_id: 9,
      anime_name: "one_piece",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BODcwNWE3OTMtMDc3MS00NDFjLWE1OTAtNDU3NjgxODMxY2UyXkEyXkFqcGdeQXVyNTAyODkwOQ@@._V1_.jpg",
    },
    {
      anime_id: 10,
      anime_name: "demon_slayer",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BZjZjNzI5MDctY2Y4YS00NmM4LTljMmItZTFkOTExNGI3ODRhXkEyXkFqcGdeQXVyNjc3MjQzNTI@._V1_.jpg",
    },
    {
      anime_id: 11,
      anime_name: "attack_on_titan",
      anime_img: "https://flxt.tmsimg.com/assets/p10701949_b_v8_ah.jpg",
    },
    {
      anime_id: 12,
      anime_name: "hunter_x_hunter",
      anime_img:
        "https://m.media-amazon.com/images/M/MV5BZjNmZDhkN2QtNDYyZC00YzJmLTg0ODUtN2FjNjhhMzE3ZmUxXkEyXkFqcGdeQXVyNjc2NjA5MTU@._V1_FMjpg_UX1000_.jpg",
    },
    {
      anime_id: 13,
      anime_name: "boku_no_hero_academia",
      anime_img:
        "https://i.pinimg.com/736x/0f/7f/ee/0f7feeb4655ffc029d1b9823bafb2ff8.jpg",
    },
  ],
};

// you can destructure the whole data using
const { success, data } = apiData;
// success contains the value of property "success"
console.log(success)
// data contains all the animes -> we can use it now to loop
// in the loop you could destructure any number of elements of the object 
for(let { anime_img } of data){
   console.log(anime_img);
}

.as-console-wrapper { max-height: 100% !important; top: 0; }

CodePudding user response：

You could use const valuesOfObject = Object.values(response) to get the values of your response object in an array then select the second index of valuesOfObject via valuesOfObject[1] then iterate over that second index:

const anime = "https://anime-facts-rest-api.herokuapp.com/api/v1"

fetch(anime)
.then(res => res.json())
.then(response => {
  console.log(response);
  const valuesOfObject = Object.values(response)
  (valuesOfObject[1]).forEach(el => console.log(el))
})