Node.js-仅显示JSON rsponse中的最后一个元素

我正在解析由远程API生成的JSON响应。我遍历响应并将所需字段存储在值中。我从pug模板创建我的homeCard元素并将值传递给它。这个问题在于它只显示json响应中的最后一个元素（第3页）。如何更改代码，以便在每次通过循环时创建homecard

    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.log(title, description, link);
      }

          })
  .catch(err => {
      console.error(err);
  });

const axios=require（'axios'）；
axios({
url:“https://api-v3.igdb.com/games",
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“用户密钥”：“用户密钥”
},
数据：“字段名称、摘要、url、流行度；排序流行度描述；限制4；”
})
。然后（响应=>{
/*获取主页*/
路由器.get（“/”，（请求、恢复、下一步）=>{
res.render（'index'，{pageId:'index'，
标题:"网页",，
卡片：家庭卡片
});
});
//遍历JSON数组
设r=响应数据；
对于（i=0；i{
控制台错误（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.log(title, description, link);
      }

          })
  .catch(err => {
      console.error(err);
  });

const axios=require（'axios'）；
axios({
url:“https://api-v3.igdb.com/games",
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“用户密钥”：“用户密钥”
},
数据：“字段名称、摘要、url、流行度；排序流行度描述；限制4；”
})
。然后（响应=>{
/*获取主页*/
路由器.get（“/”，（请求、恢复、下一步）=>{
res.render（'index'，{pageId:'index'，
标题:"网页",，
卡片：家庭卡片
});
});
//遍历JSON数组
设r=响应数据；
var homeCards=[]；
对于（i=0；i{
控制台错误（err）；
});

您正在为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.log(title, description, link);
      }

          })
  .catch(err => {
      console.error(err);
  });

const axios=require（'axios'）；
axios({
url:“https://api-v3.igdb.com/games",
方法：“GET”，
标题：{
“接受”：“应用程序/json”，
“用户密钥”：“用户密钥”
},
数据：“字段名称、摘要、url、流行度；排序流行度描述；限制4；”
})
。然后（响应=>{
/*获取主页*/
路由器.get（“/”，（请求、恢复、下一步）=>{
res.render（'index'，{pageId:'index'，
标题:"网页",，
卡片：家庭卡片
});
});
//遍历JSON数组
设r=响应数据；
var homeCards=[]；
对于（i=0；i{
控制台错误（err）；
});

“这是JSON响应”请将代码、标记、数据（如JSON等）以文本形式发布，而不是以文本图片的形式发布。原因：此外，发布的JSON无效（缺少前导的

[

），但我想您只是切断了图片…“这是JSON响应”请将代码、标记、数据（如JSON）等以文本形式发布，而不是以文本图片的形式发布。原因：此外，发布的JSON无效（缺少前导的

[

），但我认为您只是切断了图片…或者更好地使用

map

。您还可以使用速记属性和分解结构。

const homeCards=response.data.map(({name:title，summary:description，url:link}=>（{title，link，description}））；

@Sharvin K您的解决方案成功了。所有的json都被解析到卡中，但现在会呈现一张额外的卡，上面有注释。我声明了var homeCards=[4]外loop@T.J.Crowder这个声明是在for循环的内部还是外部？我声明它是isnide并得到了错误：hoemCards没有在第33Nevermind行定义。我解决了这个问题。我声明var homeCards=[]@Gabriel-根本没有循环：（好吧，循环是

映射

调用…）或者更好的方法是使用

map

。您还可以使用速记属性和解构。

consthomecards=response.data.map（{name:title，summary:description，url:link}）=>（{title，link，description}））

@Sharvin K您的解决方案成功了。所有json都被解析到卡片中，但现在一张额外的卡片被呈现出来，上面没有任何注释。我声明了var homeCards=[4]外loop@T.J.Crowder这个声明是在for循环的内部还是外部？我声明它是isnide并得到了错误：hoemCards没有在第33Nevermind行定义。我解决了这个问题。我声明var homeCards=[]@Gabriel-根本没有循环：（好吧，循环是

映射

调用…）