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 04 Answers
Reset to default 3Since 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);
});
});