vue.jsでjsonを取得できない

Question

###実現したいこと
内部サーバーassetのjsonファイルを読み込み、jsonデータを配列に入れて表示したいです。

###発生している問題
json自体は読み込んでいる様なのですが、配列にセットされず、表示できていません。

###該当コード

import Vue from 'vue';
import axios from 'axios';
const vm = new Vue({
  el: '#app',
  data: {
    results: []
  },
  mounted() {
    axios.get("../assets/js/text.json")
      .then(response => {this.results = response.data.results})
  }
});

<main id="app">
  <div class="columns" v-for="result in results">
    <p>{{ result.label }}</p>
  </div>
</main>

  "data": [
    {
      "label": "test1",
      "url": "test1.html",
      "alt": "alt1"
    },
    {
      "label": "test2",
      "url": "test2.html",
      "alt": "alt2"
    }
  ]

###試したこと
javascriptコードのmounted部分を削除、jsonファイルのデータをコピーして直接配列にセットすると表示できました。
js初心者で恐縮ですが、ご教示頂けると幸いです。

よろしくお願い致します。

Answer 1

response.data.resultsのresultsはどこから来たんですか？
こういう場合は
console.log(response)
console.log(response.data)
と表示してみてどういうデータかを確認。

これはresponse.data.dataで解決しそう。

あとはjsonファイルが固定ならaxios使う必要もなく直接取り込んでもいい。

this.results = require("../assets/js/text.json")

webpack使う前提。ビルド後のJSファイルに取り込まれてるのであくまでも固定の場合のみ使える方法。

Comments

[mojao_0227]

大変参考になりました、ありがとうございました!

Answer 2

まずJSONの形式が不正ですね。配列のみもしくはObjectとしましょう。

[
    {
      "label": "test1",
      "url": "test1.html",
      "alt": "alt1"
    },
    {
      "label": "test2",
      "url": "test2.html",
      "alt": "alt2"
    }
]

dataをキーにする必要は無いので、推奨しませんが下記でもいけます。

{
  data: [
    {
      "label": "test1",
      "url": "test1.html",
      "alt": "alt1"
    },
    {
      "label": "test2",
      "url": "test2.html",
      "alt": "alt2"
    }
  ]
}

axiosのレスポンス構造について

axiosのレスポンスの構造はresponse.dataのため、回答例上の配列のみの場合下記のようになります。

  mounted() {
    axios.get("../assets/js/text.json")
      .then(response => {this.results = response.data})
  }

もし下のObject型のようにするのであればresponse.data.dataとなります、

Comments

[mojao_0227]

jsonの記述まで明記いただきありがとうございました!
無事表示されました!