Question

我正在尝试请求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);
  });

});

一旦我分配了数组，它将不再起作用。我正在尝试获取此脚本以将每个冠军分配给一个变量，以便可以从前端调用它。

Answer 1

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函数通常用于数组而不是对象

让我知道是否有帮助

Answer 2

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

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

Answer 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);
  });
});

Answer 4

API响应是一个对象。但是const int K = 10; private void Form1_Load(object sender, EventArgs e) { var dt = new DataTable(); dt.Columns.Add("C1", typeof(int)); dt.Columns.Add("C2", typeof(int), $"C1 * {K}"); dt.Rows.Add(1); dt.Rows.Add(2); dt.Rows.Add(3); dataGridView1.DataSource = dt; }是数组上的函数，这就是为什么出现错误.map不是函数的原因。

以下是您可以选择的选项。

如果您使用的是ES5，

response.data.map

使用ES6，您可以使用Object.keys(response.data).forEach(function(key) { console.log(key, response.data[key]); });循环

for

在两种情况下，for (const key of Object.keys(response.data)) { console.log(key, response.data[key]); }将是对象键（在您的情况下是名称），而key将为您提供该键的数据。

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

response.data[key]

您的最终代码如下

Object.values(response.data)

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

4 个答案: