前端工程師的日常免不了要接 API 的資料回來列表，有條理地呈現資料，讓我來整理一下資料列表常用的技巧。
在這裡我們使用 random user API 的資料來做表格處理：
`https://randomuser.me/api/?results=10 `
`// ?results=10 就是傳10 筆資料回來 `資料的格式如下:
{
"results": [
{
"gender": "male",
"name": {
"title": "Mr",
"first": "Väinö",
"last": "Saksa"
},
"location": {
"street": {
"number": 1575,
"name": "Tahmelantie"
},
"city": "Merijärvi",
"state": "Ostrobothnia",
"country": "Finland",
"postcode": 86821,
"coordinates": {
"latitude": "-29.2488",
"longitude": "-138.7519"
},
"timezone": {
"offset": "-4:00",
"description": "Atlantic Time (Canada), Caracas, La Paz"
}
},
"email": "vaino.saksa@example.com",
"login": {
"uuid": "fd42d88d-123d-47fe-9a63-bcf6a1ee6f95",
"username": "happyelephant720",
"password": "oscar1",
"salt": "hjmYC05f",
"md5": "29f5d99c405a0587f056bcde36a3f3c3",
"sha1": "e4fcde453c18d85c5a3d3204ff2bcef6bcd46160",
"sha256": "df6dd20d96cbd5fd81a8cbebba75e573c620ec27af512e8d9c823a776fecf66e"
},
"dob": {
"date": "1989-10-07T03:02:44.944Z",
"age": 34
},
"registered": {
"date": "2021-04-27T22:17:04.410Z",
"age": 2
},
"phone": "07-099-396",
"cell": "043-633-77-51",
"id": {
"name": "HETU",
"value": "NaNNA909undefined"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/41.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/41.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/41.jpg"
},
"nat": "FI"
}
],
"info": {
"seed": "116acbb60495949f",
"results": 1,
"page": 1,
"version": "1.4"
}
}axios 接回來的資料我們先做一下處理，只取姓名、gender、age及email：
const userList = ref([])
axios.get('https://randomuser.me/api/')
.then((res) => {
userList.value = res.data.results.map((m)=>{
const tempUser={};
tempUser.name=`${m.name.first} ${m.name.last}`;
tempUser.gender=m.gender;
tempUser.age=m.dob.age;
tempUser.email=m.email;
return tempUser
});
console.log(userList.value);
})然後我們設計一下表頭的資料格式：
const fields = ref([
{ key: 'name', label: '姓名' },
{ key: 'gender', label: '性別' },
{ key: 'age', label: '年紀' },
{ key: 'email', label: '電子郵件' }
])表頭利用 v-for 來跑 <th>：
<table>
<thead>
<tr>
<th v-for="field in fields" :key="field.key" >{{ field.label }}
</th>
</tr>
</thead>
</table>前端網頁上呈現的結果如下：
接著要v-for跑 <tbody> 裡面的資料：
- 利用前面處理好的 userList 來跑<tr>
- 然後用 fields 來跑 <td> 裡面的資料。
<tbody>
<tr v-for="user in userList" :key="user.name">
<td v-for="field in fields" :key="field.key">{{ user[field.key] }} </td>
</tr>
</tbody>field.key 分別為 name、gender、age及email，對應的 user[field.key] 就是 user.name、user.gender、user.age及user.email。
完整程式碼：
<script setup>
import axios from 'axios';
import { ref } from 'vue'
const userList = ref([])
axios.get('https://randomuser.me/api/?results=10')
.then((res) => {
console.log(res);
userList.value = res.data.results.map((m)=>{
const tempUser={};
tempUser.name=`${m.name.first} ${m.name.last}`;
tempUser.gender=m.gender;
tempUser.age=m.dob.age;
tempUser.email=m.email;
return tempUser
});
console.log(userList.value);
})
const fields = ref([
{ key: 'name', label: '姓名' },
{ key: 'gender', label: '性別' },
{ key: 'age', label: '年紀' },
{ key: 'email', label: '電子郵件' }
])
</script>
<template>
<table>
<thead>
<tr>
<th v-for="field in fields" :key="field.key">{{ field.label }}
</th>
</tr>
</thead>
<tbody>
<tr v-for="user in userList" :key="user.name">
<td v-for="field in fields">{{ user[field.key] }} </td>
</tr>
</tbody>
</table>
</template>