未捕获（承诺）TypeError，如何访问对象中的数组

Question

控制台一直给我“index.js:6 Uncaught (in promise) TypeError: response is not iterable”。绞尽脑汁后我意识到我正在处理的一个对象（还是初学者），这意味着“for loop”、“forEach”、“for of”之类的东西是行不通的。所讨论的对象包含两个项目。我想访问第二个，它是一个名为“data”的数组，因此我可以使用 for 循环或“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)
  }
})

Answer 1

如您所说，您需要从响应中获取 data 数组，这是一个使用 response.data 的对象，然后您可以使用 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; }

如果要使用object destructuring。你也可以这样做。

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; }

Answer 2

您可以使用 const valuesOfObject = Object.values(response) 获取数组中 response 对象的值，然后 select 通过 valuesOfObject[1] 获取 valuesOfObject 的第二个索引，然后迭代第二个索引：

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))
})

未捕获（承诺）TypeError，如何访问对象中的数组

Uncaught (in promise) TypeError, how to access array within an object

javascript

arrays

api

object