どうもjackです。
今回は取得したデータを画面に表示させる処理を書いていきましょう！！
受け取ったデータから下記データを表示したいと思います。
・アーティスト名
・フォロワー数
・人気
ではそれぞれのデータを取り出しましょう。
src/components/Search.vue
<template>
<div class="search">
<input
placeholder="enter artist name"
v-model="search_artist_name">
<button
type="button"
@click="seach_artist">
search
</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'search',
artist_data: [],
data(){
return {
artist_data:'',
search_artist_name: '',
searched_artist_name: '',
followers: '',
popularity: '',
}
},
methods:{
// アーティストを検索
seach_artist: function(){
axios.get("https://api.spotify.com/v1/search",{
headers:{"Authorization": "Bearer トークン"},
params:{"q": this.search_artist_name , "limit": "1", "offset": "0", "type": "artist", "market": "US"}
}).then(response=>{
this.artist_data = response.data;
this.retrieve_data();
}).catch(error => console.log(error))
},
// 取得したアーティストデータから必要なデータを取り出す
retrieve_data: function(){
this.searched_artist_name = this.artist_data.artists.items[0].followers.name;
this.followers = this.artist_data.artists.items[0].followers.total;
this.popularity = this.artist_data.artists.items[0].popularity;
}
}
}
</script>
ではそれぞれのデータを表示しましょう！
src/components/Search.vue
<template>
<div class="search">
<input placeholder="enter artist name"
v-model="search_artist_name" />
<button type="button" @click="seach_artist">
search
</button>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">artist_name</th>
<th scope="col">followers</th>
<th scope="col">popularity</th>
</tr>
</thead>
<tbody>
<tr>
<th>{{ searched_artist_name }}</th>
<td>{{ followers }}</td>
<td>{{ popularity }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "search",
data() {
return {
search_artist_name: "",
artist_data:[],
searched_artist_name: "",
followers: "",
popularity: ""
};
},
methods: {
// アーティストを検索
seach_artist: function() {
axios
.get("https://api.spotify.com/v1/search", {
headers: {
Authorization:
"Bearer トークン"
},
params: {
q: this.search_artist_name,
limit: "1",
offset: "0",
type: "artist",
market: "US"
}
})
.then(response => {
this.artist_data = response.data;
this.retrieve_data();
})
.catch(error => console.log(error));
},
// 取得したアーティストデータから必要なデータを取り出す
retrieve_data: function() {
this.searched_artist_name = this.artist_data.artists.items[0].name;
this.followers = this.artist_data.artists.items[0].followers.total;
this.popularity = this.artist_data.artists.items[0].popularity;
}
}
};
</script>
では早速、検索してみましょう！！
検索とテーブルがくっついてて嫌なので離そう！
src/components/Search.vue
<template>
<div class="search">
<input placeholder="enter artist name"
id="search_box"
v-model="search_artist_name" />
<button type="button" @click="seach_artist">
search
</button>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">artist_name</th>
<th scope="col">followers</th>
<th scope="col">popularity</th>
</tr>
</thead>
<tbody>
<tr>
<th>{{ searched_artist_name }}</th>
<td>{{ followers }}</td>
<td>{{ popularity }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<style>
#search_box {
margin-bottom: 15px;
}
</style>
<script>
import axios from "axios";
export default {
name: "search",
artist_data: [],
data() {
return {
search_artist_name: "",
searched_artist_name: "",
followers: "",
popularity: ""
};
},
methods: {
// アーティストを検索
seach_artist: function() {
axios
.get("https://api.spotify.com/v1/search", {
headers: {
Authorization:
"Bearer トークン"
},
params: {
q: this.search_artist_name,
limit: "1",
offset: "0",
type: "artist",
market: "US"
}
})
.then(response => {
this.artist_data = response.data;
this.retrieve_data();
})
.catch(error => console.log(error));
},
// 取得したアーティストデータから必要なデータを取り出す
retrieve_data: function() {
this.searched_artist_name = this.artist_data.artists.items[0].name;
this.followers = this.artist_data.artists.items[0].followers.total;
this.popularity = this.artist_data.artists.items[0].popularity;
}
}
};
</script>
一応、検索結果がゼロ件の表示も用意しますか。
src/components/Search.vue
<template>
<div class="search">
<input placeholder="enter artist name"
id="search_box"
v-model="search_artist_name" />
<button type="button" @click="seach_artist">
search
</button>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">artist_name</th>
<th scope="col">followers</th>
<th scope="col">popularity</th>
</tr>
</thead>
<tbody>
<template v-if="artist_data.length == 0">
<td>
</td>
<td style="text-align:;">
no_data
</td>
</template>
<tr>
<td>{{ searched_artist_name }}</td>
<td>{{ followers }}</td>
<td>{{ popularity }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<style>
#search_box {
margin-bottom: 15px;
}
</style>
<script>
import axios from "axios";
export default {
name: "search",
artist_data: [],
data() {
return {
artist_data:"",
search_artist_name: "",
searched_artist_name: "",
followers: "",
popularity: ""
};
},
methods: {
// アーティストを検索
seach_artist: function() {
axios
.get("https://api.spotify.com/v1/search", {
headers: {
Authorization:
"Bearer トークン"
},
params: {
q: this.search_artist_name,
limit: "1",
offset: "0",
type: "artist",
market: "US"
}
})
.then(response => {
this.artist_data = response.data;
this.retrieve_data();
})
.catch(error => console.log(error));
},
// 取得したアーティストデータから必要なデータを取り出す
retrieve_data: function() {
this.searched_artist_name = this.artist_data.artists.items[0].name;
this.followers = this.artist_data.artists.items[0].followers.total;
this.popularity = this.artist_data.artists.items[0].popularity;
}
}
};
</script>
終了でーーす。
お疲れ様でした。
気が向いたらPythonでサーバー作ってCRUDでもしますか。