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.

• javascript
• node.js
• api
• object
• axios

4 Answers 4

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