Вызов axios.get, возвращающий «response.data.map не является функцией»

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

Ответ API - это объект.Но .map - это функция для массивов, поэтому вы получаете сообщение об ошибке response.data.map - не функция.

Ниже приведен вариант для вас.

Если вы используете ES5,

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

, используя ES6, вы можете использовать for loop

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

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

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 для создания объекта JavaScript из ответа JSON, обратите внимание, что это будет работать, только если ваш запрос имеет тип Content: application / json, в противном случае попробуйте JSON.stringify.но функция .map обычно используется для массивов, а не для объектов

Дайте мне знать, помогло ли это