Массив Json пустой
передал Json в массив, а консоль показала пустую, но с объектами внутри. но при печати с индексом console.info показывает undefind.. что не так ?
let pokeName = [];
let pokeId = [];
let pokeImg = [];
let pokeType = [];
let pokeMove = [];
for (let i=1; i< 21; i++) {
fetch(`https://pokeapi.co/api/v2/pokemon/${i}/`)
.then(Response => Response.json())
.then(data => {
pokeId.push(data['id']);
pokeName.push(data['name']);
const dataTypes = data['types'];
pokeType.push(dataTypes[0]['type']['name']);
const dataMoves = data['moves'];
pokeMove.push(dataMoves[0]['move']['name']);
pokeImg.push(data['sprites']['front_default']);
});
}
console.info(pokeName);
console.info(pokeId);
console.info(pokeImg);
console.info(pokeMove);
console.info(pokeType);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Журналы вашей консоли запускаются до завершения ваших вызовов выборки. Вы можете использовать async/await для решения проблемы.
Что-то вроде этого должно работать:
let pokeName = [];
let pokeId = [];
let pokeImg = [];
let pokeType = [];
let pokeMove = [];
(async function () {
for (let i = 1; i < 21; i++) {
const data = await fetch(`https://pokeapi.co/api/v2/pokemon/${i}/`);
const json = data.json();
pokeId.push(json['id']);
pokeName.push(json['name']);
const dataTypes = json['types'];
pokeType.push(dataTypes[0]['type']['name']);
const dataMoves = json['moves'];
pokeMove.push(dataMoves[0]['move']['name']);
pokeImg.push(json['sprites']['front_default']);
}
})();
console.info(pokeName);
console.info(pokeId);
console.info(pokeImg);
console.info(pokeMove);
console.info(pokeType);
вот альтернативный способ получения данных
const getPokemon =async(id)=>{
return await (await fetch(`https://pokeapi.co/api/v2/pokemon/${id}/`)).json();
}
const getSerializedData = async () =>{
for (let i=1; i< 10; i++) {
const data = await getPokemon(i);
console.info(data)
}
}
getSerializedData();Как я уже упоминал в своем комментарии, ваш код console.info() запускается до того, как fetch вернет свое обещание, и поэтому данные еще не установлены.
Циклы for на самом деле не работают с ключевым словом await, поэтому обычно вам просто нужно вместо этого преобразовать цикл for в цикл for await...of. Затем вы можете вызвать функцию async, которая перебирает все нужные вам значения, и как только все промисы в цикле будут возвращены, будет выполнен следующий код (в рамках той же функции. Любой код вне функции будет выполняться асинхронно) .
let pokeName = [];
let pokeId = [];
let pokeImg = [];
let pokeType = [];
let pokeMove = [];
let pokeCount = [];
for(let i = 1; i < 21; i++) pokeCount = [...pokeCount, i];
const _FetchPokes = async () => {
for await (const poke of pokeCount) {
await fetch(`https://pokeapi.co/api/v2/pokemon/${poke}/`)
.then(Response => Response.json())
.then(data => {
pokeId.push(data['id']);
pokeName.push(data['name']);
pokeType.push(data['types'][0]['type']['name']);
pokeMove.push(data['moves'][0]['move']['name']);
pokeImg.push(data['sprites']['front_default']);
});
}
// This will run AFTER the data has been fetched
_RunAfterFetch();
}
const _RunAfterFetch = () {
// Add any code you want to run here
// This will run AFTER the pokemon data has been fetched
console.info(pokeName[1-1]);
}
_FetchPokes();Благодарность! но как мне получить доступ к отдельным массивам?
@danielkalinin Что ты имеешь в виду? Исходя из того, что вы предоставили, данные хранятся в 5 массивах. Идентификатор каждого покемона минус один — это индекс каждого массива, который вам понадобится. Таким образом, покемон с идентификатором 4 (чармандер) будет pokeName[(4-1)] или просто pokeName[3]. Если бы вы хотели, чтобы все данные о покемонах хранились вместе, вы бы предпочли использовать объект, а не отдельные массивы.
я понимаю, но когда я делаю console.info(pokeName[1-1]); после вашего кода я получаю неопределенность..
Если вы пытаетесь записать его после строки _FetchPokes(), то это та же проблема с исходным кодом. Данные о покемонах извлекаются асинхронно, то есть остальная часть кода после этой строки продолжает выполняться, пока данные извлекаются (чтобы не заморозить всю страницу). Вот почему мои строки console.info() находятся внутри моей функции. Если вы хотите выполнить больше кода, вы можете вызвать другую функцию (или console.info()) внутри функции _FetchPokes().
я имел в виду, что хотел использовать его вне _fetchpokes()
но есть ли способ хранить данные в массивах и использовать их вне выборки?
@danielkalinin Данные хранятся и могут использоваться вне fetch. Концепция здесь, чтобы понять, когда запускается код. Поскольку для получения всех покемонов требуется время, вам нужен код, который ждет, пока все данные о покемонах не будут получены, а затем запускается. Простое добавление строк в JavaScript не поможет. Попробуйте добавить новую функцию с любым кодом, который вы хотите, а затем вызовите эту функцию в конце _FetchPokes(). Я обновлю свой ответ, чтобы показать пример.
Ваш код работает, но вы записываете значения в консоль до того, как обещание будет возвращено из
fetch, что означает, что данные еще не были записаны в массивы.