.forEach (...) не определено при выборке - PullRequest
Новая
       4

.forEach (...) не определено при выборке

0 голосов
/ 06 мая 2020

Я хочу напечатать каждый объект объекта JSON, используя API-интерфейс fetch, и повторить ответ с помощью функции метода forEach 

 artistSelected(evt){
        let artistId = evt.target.parentElement.id;  
        fetch("http://localhost:3000/artists/"+artistId+"/albums")
            .then((response) => {  
                if (response.ok) {
                    return response.json();
                } else {
                    throw new Error('a problem occured');
                }
            })
            .then((response) => {    
                let albums = response;
                albums.forEach(value => {
                    console.log(value) 
                })
            .catch((error) => { 
                console.log(error);
            })
        })
    }

когда я запускаю функцию, у меня появляется ошибка TypeError: albums.forEach(...) is undefined и я не могу распечатать все объекты

пример ответа альбома JSON может быть: 

[
  {
    "id": "the_rolling_stones",
    "artistId": "rolling_stones",
    "year": 1964,
    "title": "The Rolling Stones",
    "label": "ABKCO Records",
    "cover": "http://cps-static.rovicorp.com/3/JPG_500/MI0002/193/MI0002193977.jpg"
  },
  {
    "id": "12_5",
    "year": 1964,
    "artistId": "rolling_stones",
    "title": "12x5",
    "label": "ABKCO Records",
    "cover": "http://cps-static.rovicorp.com/3/JPG_500/MI0000/498/MI0000498502.jpg"
  },
  {
    "id": "out_of_our_heads",
    "artistId": "rolling_stones",
    "year": 1965,
    "title": "Out of Our Heads",
    "label": "ABKCO Records",
    "cover": "http://cps-static.rovicorp.com/3/JPG_500/MI0001/682/MI0001682084.jpg"
  }
]

, и когда я печатаю ответ первого '.then', у меня есть:

Разрешение 

ponse { type: "cors", url: "http://localhost:3000/artists/the_clash/albums", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, body: ReadableStream, bodyUsed: false }

Ответы [ 3 ]

0 голосов
/ 06 мая 2020

Предполагая, что это проблема типовой безопасности, решение будет следующим: 

.then((response) => {
  if (response) {
    let albums = response.json();
    albums.forEach(value => {
      console.log(value)
    })
  } else {
    throw new Error('a problem occured');
  }
}).catch((error) => {
  console.log(error);
})
0 голосов
/ 06 мая 2020

Я нашел решение, я не знаю, почему его никто не видел, но ловушка была не в том месте, потому что, когда я переключаюсь на Chrome, ошибка возникает не из-за foreach, а из-за ловушки.

0 голосов
/ 06 мая 2020

Для справки, я беру ваш ответ JSON (массив объектов), и благодаря этому мы можем легко выполнить итерацию массива с помощью foreach l oop

var album =[
  {
    "id": "the_rolling_stones",
    "artistId": "rolling_stones",
    "year": 1964,
    "title": "The Rolling Stones",
    "label": "ABKCO Records",
    "cover": "http://cps-static.rovicorp.com/3/JPG_500/MI0002/193/MI0002193977.jpg"
  },
  {
    "id": "12_5",
    "year": 1964,
    "artistId": "rolling_stones",
    "title": "12x5",
    "label": "ABKCO Records",
    "cover": "http://cps-static.rovicorp.com/3/JPG_500/MI0000/498/MI0000498502.jpg"
  },
  {
    "id": "out_of_our_heads",
    "artistId": "rolling_stones",
    "year": 1965,
    "title": "Out of Our Heads",
    "label": "ABKCO Records",
    "cover": "http://cps-static.rovicorp.com/3/JPG_500/MI0001/682/MI0001682084.jpg"
  }
];
album.forEach(value =>{
	console.log(value.title)
});
...