axios.get 调用返回“response.data.map 不是函数”答案

【问题标题】：axios.get call returning "response.data.map is not a function"axios.get 调用返回“response.data.map 不是函数”
【发布时间】：2019-02-09 14:23:31
【问题描述】：

我正在尝试请求 JSON 数据并将其导入我网站的某个部分。当我控制台记录它时，我没有问题。但是，当我尝试将数据分配给数组和变量时，它会显示“TypeError：response.data.map 不是函数”

下面的代码在控制台中运行。

router.get("/", (req, res, next)=>{

  axios.get("http://ddragon.leagueoflegends.com/cdn/6.24.1/data/en_US/champion.json")
  .then(res => console.log(res))
  .catch((err)=>{
    console.log(err);
  });
  res.render("champions");
});

一旦我添加了数组，它就不再起作用了

router.get("/", (req, res, next)=>{

  axios.get("http://ddragon.leagueoflegends.com/cdn/6.24.1/data/en_US/champion.json")
  .then( (response)=>{
    let championArray = [];
    response.data.map((champs)=>{
      championArray.push(champs);
    });
    res.render("champions", {
      champs: championArray
    });
  })
  .catch((err)=>{
    console.log(err);
  });

});

一旦我分配了数组，它就不再起作用了。我试图让这个脚本将每个冠军分配给一个变量，以便我可以从前端调用它。

【问题讨论】：

标签： javascript node.js api object axios

【解决方案1】：

由于 API 将数组作为对象返回，因此 .map 将不起作用。试试下面的代码，它会工作。

Object.keys(response.data).map((champs)=>{
  championArray.push(champs);
});

【讨论】：

【解决方案2】：

router.get("/", (req, res, next)=>{

  axios.get("http://ddragon.leagueoflegends.com/cdn/6.24.1/data/en_US/champion.json")
  .then( (response)=>{
    responseData = JSON.parse(response.data); //or just response idk :)
    let championArray = [];
    responseData.map((champs)=>{
      championArray.push(champs);
    });
    res.render("champions", {
      champs: championArray
    });
  })
  .catch((err)=>{
    console.log(err);
  });

});

尝试使用 JSON.parse 从 JSON 响应中创建一个 JavaScript 对象，请注意，这仅在您发出的请求具有 Content-type: application/json 时才有效，否则请尝试 JSON.stringify。但是 .map 函数通常用于数组而不是对象

如果有帮助请告诉我

【讨论】：

axios 返回解析后的实体...如果再次解析会返回错误

【解决方案3】：

router.get("/", (req, res, next)=>{


axios.get("http://ddragon.leagueoflegends.com/cdn/6.24.1/data/en_US/champion.json")
  .then( (response)=>{
    let championArray = [];
    let resData = response.data;
    if (!resData.length){
      resData.map((data, index) => {
       if (!data){
         data = JSON.parse(data);
         championArray.push(data);
       } 
      })
    }
    res.render("champions", {
      champs: championArray
    });
  })
  .catch((err)=>{
    console.log(err);
  });
});

【讨论】：

请添加一些 cmets/reasoning 以使您的答案清晰。
好的，json文件中的json数据以字符串类型显示。所以在 axios 请求之后，你必须调用 json.parse() ，然后你才能将它与 json 对象类型一起使用。

【解决方案4】：

API 响应是一个对象。但是.map 是数组上的函数，这就是为什么您会收到错误response.data.map is not a function。

以下是您的选择。

如果你使用的是 ES5，

Object.keys(response.data).forEach(function(key) {
    console.log(key, response.data[key]); 
});

使用 ES6，你可以使用 for 循环

for (const key of Object.keys(response.data)) {
    console.log(key, response.data[key]);
}

在这两种情况下，key 将是对象键（在您的情况下是名称），response.data[key] 将为您提供该键的数据。

还请注意，由于您只对值而不是键感兴趣，因此您可以简单地使用

Object.values(response.data)

您的最终代码如下所示

router.get("/", (req, res, next)=>{
  axios.get("http://ddragon.leagueoflegends.com/cdn/6.24.1/data/en_US/champion.json")
  .then( (response)=>{
    res.render("champions", {
      champs: Object.values(response.data)
    });
  })
  .catch((err)=>{
    console.log(err);
  });
});

【讨论】：