イイダリョウのブログ。【Vue.js】axiosでJSONファイルを読み込む(はっぴいえんど編)2019-04-29【Vue.js】axiosでJSONファイルを読み込む(はっぴいえんど編)JSVue.jsで外部JSONファイルの値を読み込むシリーズ、前回の続きです。前回はデータ情報が全部表示されましたが、今回はJSONデータの中の値のみを読み込みます。クモのようにコツコツと前回のおさらい前回は前回はこんな内容でした。CodePen.なんだか余計なデータ情報がまるまる羅列されてます。HTMLは超シンプル。}}でJSONの情報を読み込みます。}})上のelで'#appと紐付け、下のmounted()メソッドでaxiosを使ってjsonファイルを読み込んでいます。responseだとデータ情報が全部読み込まれるようです。今回はここから値だけを引っ張り出したい。データの中身だけ表示さて、前回のデータ「日本全国酒飲み音頭」ですがどうやらJSONファイルとしては少し不備があるようです。}\n"と連想配列の全体が文字列になって中の改行コードが入ってしまっています。APIの記事の時に作った「はっぴいえんど」のJSONファイルを使います。response.dataにするとデータの中身だけを表示できるようです。Vue.jsやってみます。CodePen.やた!余計な情報がなくてデータの中身だけ表示されました。response.dataにしています。}}</p></div>HTMLは引き続き超シンプル。}}で読み込んでいます。この状態でも配列の記号がむき出しになっていて見栄えが悪いですね。単独の値を引っ張りだしたい。}}の部分で絞り込みます。CodePen.おお!想定通りの表示!え?ただのテキストじゃないかって?HTMLタブを表示してみてください。HTMLはこんなです。}}」(通称「ゆでめん」)。ファンキーなリズム隊、大瀧詠一氏の金属的な歌声。その第一声から「お正月といえば...」松本氏の書く純日本的な歌詞がたまらない。ニューロックの幕開けを感じることができるアルバム。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曲名の曲名が表示されます。最後にVue.jsシリーズ、ようやく再開しましたー。前回は2018年の11月だったのでちょっと間が空きました。この段階では生JSやjQueryでもできるようなことを再現しているだけなので、リアクティブなどのSPAらしい恩恵を体験していません。今年はJSフレームワーク(まずはVue.js)とPHPフレームワーク(まずはLaravel)をマイテーマにしてるので、また更新ペースをあげていきたく思います。それではまた!!※参考:Vue.jsの習得のためにやったことまとめqiita.com*1:口髭という意味らしいです。for文を絡めて「for...2019-08-22【Vue.js】コンポーネントにpropsオプションで値を渡すVue.jsシリーズの続きです。前回はコンポーネントにカウンター...2019-08-17【Vue.js】コンポーネントにカウンターを仕込む(※dataオプションを無名関数に!)Vue.jsシリーズ続きです。前回はコンポーネントでハローワール...2019-08-14【Vue.js】コンポーネント事始め(グローバル登録とローカル登録)Vue.jsシリーズの続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。