Я анализирую ответ JSON, сгенерированный удаленным API. Я перебираю ответ и сохраняю нужные поля в значениях. Я создаю свои элементы homeCard из шаблона мопса и передаю ему значения. Эта проблема заключается в том, что он отображает только последний элемент в ответе json (Sexy Beach 3). Как мне изменить свой код, чтобы домашняя карточка создавалась каждый раз, когда я прохожу цикл?
const axios = require('axios');
axios({
url: "https://api-v3.igdb.com/games",
method: 'GET',
headers: {
'Accept': 'application/json',
'user-key': 'user-key'
},
data: "fields name,summary,url,popularity;sort popularity desc;limit 4;"
})
.then(response => {
/* GET home page. */
router.get('/', (req, res, next) => {
res.render('index', { pageId: 'index',
title: 'Homepage',
cards: homeCards
});
});
//Iterate through the JSON array
let r = response.data;
for (i=0; i<r.length; ++i){
//create homecards with
var title = r[i].name;
var description = r[i].summary;
var link = r[i].url;
var homeCards = [
{
title: title,
link: link,
description: description,
},
{
title: title,
link: link,
description: description,
},
{
title: title,
link: link,
description: description,
},
{
title: title,
link: link,
description: description,
},
]
console.info(title, description, link);
}
})
.catch(err => {
console.error(err);
});
Вот ответ JSON
Вы присваиваете одно и то же значение объекту массива homecards, а также перезаписываете один и тот же массив на каждой итерации. Вы должны объявить массив homecards вне цикла и поместить в него объекты.
const axios = require('axios');
axios({
url: "https://api-v3.igdb.com/games",
method: 'GET',
headers: {
'Accept': 'application/json',
'user-key': 'user-key'
},
data: "fields name,summary,url,popularity;sort popularity desc;limit 4;"
})
.then(response => {
/* GET home page. */
router.get('/', (req, res, next) => {
res.render('index', { pageId: 'index',
title: 'Homepage',
cards: homeCards
});
});
//Iterate through the JSON array
let r = response.data;
var homeCards = [];
for (i=0; i<r.length; ++i){
//create homecards with
var title = r[i].name;
var description = r[i].summary;
var link = r[i].url;
homeCards.push({
title: title,
link: link,
description: description,
});
console.info(title, description, link);
}
})
.catch(err => {
console.error(err);
});
Или еще лучше, используйте map
. Вы также можете использовать сокращенные свойства и деструктурирование. const homeCards = response.data.map(({name: title, summary: description, url: link}) => ({title, link, description}));
@Sharvin K Ваше решение сработало. Весь json разбирается на карточки, но теперь рендерится лишняя карточка с пометкой на ней. Я объявил var homeCards = [4] вне цикла for
@Т.Дж. Crowder Это объявление находится внутри или вне цикла for? Я объявил это iside и получил ошибку: hoemCards не определен в строке 33.
Неважно. Я исправил проблему. Я объявляю var homeCards = []
@Gabriel - Никакого цикла: pastebin.com/v5rEqvKG (Ну, цикл - это вызов map
...)
[
), но я полагаю, что вы просто отрезали изображение...