Node.js — отображение только последнего элемента в ответе JSON

Я анализирую ответ 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

Node.js — отображение только последнего элемента в ответе JSON

"Вот ответ JSON" Пожалуйста, опубликуйте код, разметку, данные, такие как JSON и т. д. как текст, а не как картина текста. Почему: meta.stackoverflow.com/q/285551/157247 Кроме того, опубликованный JSON недействителен (отсутствует начальный [), но я полагаю, что вы просто отрезали изображение...
T.J. Crowder 30.05.2019 07:08
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
64
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы присваиваете одно и то же значение объекту массива 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}));

T.J. Crowder 30.05.2019 07:09

@Sharvin K Ваше решение сработало. Весь json разбирается на карточки, но теперь рендерится лишняя карточка с пометкой на ней. Я объявил var homeCards = [4] вне цикла for

Gabriel 30.05.2019 09:50

@Т.Дж. Crowder Это объявление находится внутри или вне цикла for? Я объявил это iside и получил ошибку: hoemCards не определен в строке 33.

Gabriel 30.05.2019 09:51

Неважно. Я исправил проблему. Я объявляю var homeCards = []

Gabriel 30.05.2019 09:54

@Gabriel - Никакого цикла: pastebin.com/v5rEqvKG (Ну, цикл - это вызов map...)

T.J. Crowder 30.05.2019 10:05

Другие вопросы по теме