基礎からメモ： Vue.js CH2-p83 外部データ（Json）の取得

外部のJSONファイルに書かれたデータを、Vue.jsのデータとして取り込む。Ajaxライブラリの「axios」を使う。

[list.json]

[
  { "id": 1, "name": "スライム", "hp": 100 },
  { "id": 2, "name": "ゴブリン", "hp": 200 },
  { "id": 3, "name": "ドラゴン", "hp": 500 }
]

[index14.html]

<div id="app">
  <!-- 外部から取り込んだJSONデータを表示  -->
  <ul>
    <li v-for="(item, index) in list" v-bind:key="item.id">
      ID: {{ item.id }} {{ item.name }} HP: {{ item.hp }}
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="main14.js"></script>

[main14.js]

/*
 外部JSONデータの取得
*/

var app = new Vue({
  el: '#app',
  data: {
      list: []
  },
  created: function() {
    axios.get("list.json").then(function(response) {
      this.list = response.data;
    }.bind(this)).catch(function(e) {
      console.error(e)
    })
  }
})

インスタンスが作成されリアクティブの初期化後にすぐJSONデータを取得表示したいので、ライフサイクルフックのcreatedを使っている。

結果表示

ID: 1 スライム HP: 100
ID: 2 ゴブリン HP: 200
ID: 3 ドラゴン HP: 500

ここまではindex.htmlが置かれたWebサーバのルートにあるJSONファイルだったが、JSONデータを取得するAPIとして公開されたURLからデータを得てみる。例としてQiitaの最新記事を取得してみる。

[index15.html]

<div id="app">
  <!-- 外部から取り込んだJSONデータを表示 (Qiita記事取得) -->
    <button v-on:click="doRequest">Qiita記事取得</button>
    <ul>
      <li v-for="(item, index) in items" v-bind:key="item.id">
        [{{ index }}]:
        <a :href="item.url" target="_blank" rel="nofollow noopener noreferrer"> {{ item.title }}</a>
        <span>（更新日： {{ item.updated_at }}）</span>
      </li>
    </ul>
</div>

[main15.js]

/*
 外部JSONデータの取得 (Qiita記事取得)
*/

var app = new Vue({
  el: '#app',
  data: {
      items: []
  },
  methods: {
    doRequest: function(e) {
      axios.get('https://qiita.com/api/v2/items?page=1&per_page=20')
      .then(function(res) {
        app.items = res.data;
      }).catch(function(err) {
        console.log(err);
      });
    }
  }
});

「Qiita記事取得」と書かれたボタンを押すと、最新記事のリストが表示される。

Ajaxライブラリの「axios」を使って、外部JSONファイルに書かれたデータを取り込むことができる。