reactでaxiosを使って取得したJSONを配列に格納したい

Question

分からないこと

Reactでaxiosを使って取得したJSONデータを配列に格納したいのですが、うまくいきません。
おかしいところを教えて頂けないでしょうか。
下がコードです。

var listName = [];
axios
            .get(　ENDPOINT, {
                    headers: { "Content-Type": "application/json" },
                    data: {}  
                })
            .then( (res) => {
                for(var i in Nunber(res.data.num) ){
                    listName.push(res.data.array[i].name);
                }
　　　　　　　　　 console.log(listName);
            })
            .catch( (error) => {
                console.log('通信に失敗しました');
            });

得られるJSONは以下の通りです。

{
  "array": [
    {
      "id": 1,
      "name": "パン屋"
    },
    {
      "id": 2,
      "name": "弁当屋"
    },
    {
      "id": 3,
      "name": "カレー屋"
    },
    {
      "id": 4,
      "name": "肉屋"
    },
    {
      "id": 5,
      "name": "八百屋"
    }
  ],
  "foodNum": 5,
  "userId": 1
}

このようにして、dataのなかのarrayに入ってるname要素を配列にいれたいのですが、コンソールで確認してもからの配列のままです。
どこがいけないのでしょうか？
よろしくお願いいたします。

Comments

[jun68ykt]

GET /ENDPOINT で返ってくる JSON も質問に追記をお願いしたいです。

[jun68ykt]

それと、もう一点、ご質問に挙げられているコードの中に
or(var i in Nunber(res.data.num) ){
という行がありますが、 Nunber は Number の間違いではありませんか？

[hello_whats_up]

情報の追記をしました。
ご指摘ありがとうございます。

[jun68ykt]

JSONの追記どうもです。回答しました。

Answer 1

以下のように修正してみると、いかがでしょう？

修正前

for(var i in Nunber(res.data.num) ){

修正後

for (var i=0; i < res.data.array.length; ++ i) {

上記の修正後の動作を確認するため、以下

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/NWKXeMV

を作成しました。これは、上記の修正を行い、ENDPOINT からGETするとご質問に挙げられているJSONが返されるようにして、動作確認できるように作ったものです。

console に、意図通りに、arrayの各要素の name が出力されるのを確認できるかと思います。

追記

レスポンスから listName を作成するために、以下のように map を使うこともできます。

listName = res.data.array.map(e => e.name);

• 動作確認用CodePen: https://codepen.io/jun68ykt/pen/aboEPXw

Comments

[hello_whats_up]

JSONを取得できるのを確認しました。
迅速な回答に感謝します。ありがとうございます。

[jun68ykt]

どういたしまして。解決したようで、よかったです。