【Vue.js】axiosでJSONファイルを読み込む（はっぴいえんど編）

Vue.jsで外部JSONファイルの値を読み込むシリーズ、前回の続きです。前回はデータ情報が全部表示されましたが、今回はJSONデータの中の値のみを読み込みます。

【目次】

前回のおさらい
this.info = response.data でデータの中身だけ表示
HTMLのマスタッシュタグで細かく絞り込む
最後に

※参考：【Vue.js】axiosでJSONファイルを読み込む（酒が飲めるぞ！編） - クモのようにコツコツと

前回のおさらい

前回は前回はこんな内容でした。

See the Pen Hellow vue v-for03 by イイダリョウ (@i_ryo) on CodePen.

なんだか余計なデータ情報がまるまる羅列されてます。コードはこんなです。

HTMLは超シンプル。

<div id="app">
  {{ info }}
</div>

{{ info }}でJSONの情報を読み込みます。

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get(url) //ここにURLを入れる
      .then(response => (this.info = response))
  }
})

上のelで'#appと紐付け、下のmounted()メソッドでaxiosを使ってjsonファイルを読み込んでいます。
then()メソッドの中this.info = responseだとデータ情報が全部読み込まれるようです。

今回はここから値だけを引っ張り出したい。

this.info = response.data でデータの中身だけ表示

さて、前回のデータ「日本全国酒飲み音頭」ですがどうやらJSONファイルとしては少し不備があるようです。" {\n \"title\"〜（中略）〜ドサクサで\",\n ]\n }\n"と連想配列の全体が文字列になって中の改行コードが入ってしまっています。（配列の一番最後にカンマが入っているせいかと思われる）

このままだと扱いにくいので今回は別ファイル、以前、Fetch APIの記事の時に作った「はっぴいえんど」のJSONファイルを使います。

※参考：【JSON】外部JSONファイル化したはっぴいえんどアルバム情報をFetch APIでDOMに読み込む - クモのようにコツコツと

Vue.jsのチュートリアルによると、this.info = responseのあとに.dataを続けてthis.info = response.dataにするとデータの中身だけを表示できるようです。

※参考：axios を利用した API の使用 — Vue.js

やってみます。

See the Pen Hellow vue v-for04 by イイダリョウ (@i_ryo) on CodePen.

やた！余計な情報がなくてデータの中身だけ表示されました。

JSのコード

new Vue({
  el: '#happyend',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get(url) //ここにURLを入れる
      .then(response => {this.info = response.data})
  }
})

then()メソッドの中、this.info = response.dataにしています。

HTMLのコード

<div id="happyend">
  <h1>happyend.jsonの中身</h1>
  <p>{{ info }}</p>
</div>

HTMLは引き続き超シンプル。外側の#happyendがVueのel:に紐づいていて、JSONの情報は{{ info }}で読み込んでいます。

ただ、まだこの状態でも配列の記号がむき出しになっていて見栄えが悪いですね。さらに単独の値を引っ張りだしたい。

HTMLのマスタッシュタグで細かく絞り込む

さて、もっと細かく読み込むにはthis.info = response.data[0].titleなどとJSの方で細かく絞り込む方法もありますが、JSの方はこのままで、HTML側の波括弧2つのマスタッシュタグ*1{{ }}の部分で絞り込みます。

やってみました。

See the Pen Hellow vue v-for05 by イイダリョウ (@i_ryo) on CodePen.

おお！想定通りの表示！え？ただのテキストじゃないかって？HTMLタブを表示してみてください。

HTMLはこんなです。（JSは変更なしです）

<div id="happyend">
<h1 class="title">{{ info[0].title }}</h1>
  <p class="release">発売日：{{ info[0].release }}</p>
  <ol class="track">
    <li v-for="(value) in info[0].track">
      {{ value }}
    </li>
  </ol>
  <hr>
  <p>{{ info[0].release }}に発売されたはっぴいえんどのファーストアルバム「{{ info[0].title }}」（通称「ゆでめん」）。1曲目の「{{info[0].track[0]}}」の冒頭から鈴木茂氏のブルージーなギターと細野晴臣氏、松本隆氏のファンキーなリズム隊、大瀧詠一氏の金属的な歌声。その第一声から「お正月といえば…」松本氏の書く純日本的な歌詞がたまらない。ニューロックの幕開けを感じることができるアルバム。</P>
</div>

. title：info[0].title＝1番目の配列（ファーストアルバム）のtitleキー（アルバム名）の値
.release：info[0].release＝1番目の配列（ファーストアルバム）のreleaseキー（発売日）の値
.trackのli：v-for属性でinfo[0].track＝1番目の配列（ファーストアルバム）のtrackキー（曲名）内の配列をループ。valueで配列の値を表示
pタグの中でもいくつか値を呼び出しています。info[0].track[0]と書くと1曲名の曲名が表示されます。