最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - axios.get call returning "response.data.map is not a function" - Stack Overflow

programmeradmin1浏览0评论

I am trying to request JSON data and import it into a certain part of my website. When I console log it I have no issues. However when I attempt to assign the data to a array and variable it says "TypeError: response.data.map is not a function"

the code right below works in console.


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

  axios.get(".24.1/data/en_US/champion.json")
  .then(res => console.log(res))
  .catch((err)=>{
    console.log(err);
  });
  res.render("champions");
});

Once I add the array it no longer works


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

  axios.get(".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);
  });

});

Once I assign the array it no longer works. I am trying to get this script to assign each champion to a variable so I can call it from the front end.

I am trying to request JSON data and import it into a certain part of my website. When I console log it I have no issues. However when I attempt to assign the data to a array and variable it says "TypeError: response.data.map is not a function"

the code right below works in console.


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

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

Once I add the array it no longer works


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

  axios.get("http://ddragon.leagueoflegends./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);
  });

});

Once I assign the array it no longer works. I am trying to get this script to assign each champion to a variable so I can call it from the front end.

Share Improve this question asked Feb 9, 2019 at 5:14 Chase DChase D 411 gold badge1 silver badge2 bronze badges 0
Add a ment  | 

4 Answers 4

Reset to default 3

Since the API is returning array as objects, .map will not work. Try below code, it will work.

Object.keys(response.data).map((champs)=>{
  championArray.push(champs);
});
router.get("/", (req, res, next)=>{

  axios.get("http://ddragon.leagueoflegends./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);
  });

});

Try using the JSON.parse to create a JavaScript object out of the JSON response, note that this will only work if the request you make has a Content-type: application/json, otherwise try JSON.stringify. but the .map function is usually used on arrays not objects

Let me know if that helped

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


axios.get("http://ddragon.leagueoflegends./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);
  });
});

The API response is an object. But .map is a function on arrays, which is why you are getting the error response.data.map is not a function.

Following are an option for you.

If you're using ES5,

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

using ES6, you could use for loop

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

in both cases, key would be the object key (in your case, the names) and response.data[key] would give you the data for that key.

Also note that since you're only interested in the values and not keys, you could simply use

Object.values(response.data)

Your final code would look like

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

评论列表(0)

  1. 暂无评论