未捕獲（承諾中）TypeError，如何訪問物件中的陣列

控制臺不斷給我“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)
  }
})

uj5u.com熱心網友回復：

正如你所說，你需要data從回應中獲取陣列，它是一個物件 using 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; }

如果你想使用物件解構。你也可以這樣做。

請注意：我已經硬編碼了您的 API 在此處回傳的資料。

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

uj5u.com熱心網友回復：

您可以使用在陣列const valuesOfObject = Object.values(response)中獲取物件的值，然后選擇via的第二個索引，然后遍歷該第二個索引：responsevaluesOfObjectvaluesOfObject[1]

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

標籤：javascript 数组 api 目的

上一篇：如何在同一表面中一次顯示一個創建的組件？

下一篇：我如何有一個可被3整除的下降回圈