英文:
How to fetch data from given format on datatable?
问题
我试图编写逻辑来在数据表中显示数据。下面是我需要显示的表格。
将只有5列，从Day1到Day5。在行中，如果dayName='DAY 1'，则需要获取在weekDay数组中的数据，如Music Theme（这是weekDay数组中theme键的值）。10分钟是themeTime，歌唱练习是title等等。
以下是数据的格式 -
[
{
"id": "7658dc9e-5720-4544-8780-761e1993a8a3",
"folderMapID": "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
"themeName": "test",
"classTime": 45,
"dayName": "DAY 2",
"isActive": true,
"weekDay": [
{
"id": "2cebd6c7-339d-4d99-a199-b1c145211272",
"position": 1,
"theme": "QA Theme One",
"themeTime": 14,
"title": "test title",
"isActive": true
}
]
},
{
"id": "8f638849-6e54-4949-b404-300aa2c8a0c0",
"folderMapID": "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
"themeName": "Butterfly Theme",
"classTime": 60,
"dayName": "DAY 1",
"isActive": true,
"weekDay": [
{
"id": "3796dac9-18b0-4dd4-912f-8aeeede84e6b",
"position": 1,
"theme": "Music Theme",
"themeTime": 10,
"title": "singing practice",
"isActive": true
},
{
"id": "57b8f608-d2ad-4f7b-807b-db75aa0d10a9",
"position": 2,
"theme": "Dance Theme",
"themeTime": 15,
"title": "learn dance steps",
"isActive": true
},
{
"id": "d395b047-2847-474a-a553-afbd93782092",
"position": 3,
"theme": "QA Theme One",
"themeTime": 20,
"title": "QA testing",
"isActive": true
}
]
}
]
HTML模板 -
<v-data-table :headers="headers" :items="weekScheduleList" disable-pagination
hide-default-footer>
<template v-slot:no-data>
<v-card-subtitle class="d-flex justify-center">No Data Available</v-card-subtitle>
</template>
</v-data-table>
export default {
data () {
return {
weekScheduleList: [],
theme: '',
headers: [
{ text: 'DAY 1', value: 'theme', align: 'center', sortable: true },
{ text: 'DAY 2', value: '0', align: 'center', sortable: true },
{ text: 'DAY 3', value: '0', align: 'center', sortable: true },
{ text: 'DAY 4', value: '0', align: 'center', sortable: true },
{ text: 'DAY 5', value: '0', align: 'center', sortable: true }
],
}
},
methods: {
getWeekScheduleList: async function () {
try {
this.isLoading = true
let res = await http.get(`${CONSTANTS.API_URL}/api/get-week/${this.folderId}`)
const days = res.data
const newData = []
days.forEach(day => {
const row = {
day: day.dayName
}
day.weekDay.forEach(weekDay => {
row[weekDay.theme] = `${weekDay.theme} - ${weekDay.themeTime} mins - ${weekDay.title}`
})
newData.push(row)
})
this.weekScheduleList = newData
console.log('this.weekScheduleList :', this.weekScheduleList)
} catch (e) {
const errorMessage = (e && e.response && e.response.data.message) || e.message
this.errMsg(errorMessage)
}
},
}
}
英文:
I am trying to write logic to display data in datatable. Below is the table I need to display.
There will be only 5 columns Day1 to Day5.
In rows, if dayName='DAY 1' then data present in weekDay arrayList needs to be fetch like Music Theme(which is value to theme key in weekDay arrayList). 10 mins is themeTime and singing practice is title and so on.
Below is format of data -
[
{
"id": "7658dc9e-5720-4544-8780-761e1993a8a3",
"folderMapID": "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
"themeName": "test",
"classTime": 45,
"dayName": "DAY 2",
"isActive": true,
"weekDay": [
{
"id": "2cebd6c7-339d-4d99-a199-b1c145211272",
"position": 1,
"theme": "QA Theme One",
"themeTime": 14,
"title": "test title",
"isActive": true
}
]
},
{
"id": "8f638849-6e54-4949-b404-300aa2c8a0c0",
"folderMapID": "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
"themeName": "Butterfly Theme",
"classTime": 60,
"dayName": "DAY 1",
"isActive": true,
"weekDay": [
{
"id": "3796dac9-18b0-4dd4-912f-8aeeede84e6b",
"position": 1,
"theme": "Music Theme",
"themeTime": 10,
"title": "singing practice",
"isActive": true
},
{
"id": "57b8f608-d2ad-4f7b-807b-db75aa0d10a9",
"position": 2,
"theme": "Dance Theme",
"themeTime": 15,
"title": "learn dance steps",
"isActive": true
},
{
"id": "d395b047-2847-474a-a553-afbd93782092",
"position": 3,
"theme": "QA Theme One",
"themeTime": 20,
"title": "QA testing",
"isActive": true
}
]
}
]
HTML template -
<v-data-table :headers="headers" :items="weekScheduleList" disable-pagination
hide-default-footer>
<template v-slot:no-data>
<v-card-subtitle class="d-flex justify-center">No Data Available</v-card-subtitle>
</template>
</v-data-table>
export default {
data () {
return {
weekScheduleList: [],
theme: '',
headers: [
{ text: 'DAY 1', value: 'theme', align: 'center', sortable: true },
{ text: 'DAY 2', value: '0', align: 'center', sortable: true },
{ text: 'DAY 3', value: '0', align: 'center', sortable: true },
{ text: 'DAY 4', value: '0', align: 'center', sortable: true },
{ text: 'DAY 5', value: '0', align: 'center', sortable: true }
],
}
},
methods: {
getWeekScheduleList: async function () {
try {
this.isLoading = true
let res = await http.get(`${CONSTANTS.API_URL}/api/get-week/${this.folderId}`)
const days = res.data
const newData = []
days.forEach(day => {
const row = {
day: day.dayName
}
day.weekDay.forEach(weekDay => {
row[weekDay.theme] = `${weekDay.theme} - ${weekDay.themeTime} mins - ${weekDay.title}`
})
newData.push(row)
})
this.weekScheduleList = newData
console.log('this.weekScheduleList :', this.weekScheduleList)
} catch (e) {
const errorMessage = (e && e.response && e.response.data.message) || e.message
this.errMsg(errorMessage)
}
},
}
答案1
得分: 0
按照查看您的表格 UI，您需要将 API 数据转换为以下格式，其中每一行都包含所有 5 天的数据。
[
{
"DAY 1": "Butterfly Theme - 10 mins - singing practice",
"DAY 2": "test - 14 mins - test title",
"DAY 3": "",
"DAY 4": "",
"DAY 5": ""
},
{
"DAY 1": "Butterfly Theme - 15 mins - learn dance steps",
"DAY 2": "",
"DAY 3": "test - 20 mins - QA testing",
"DAY 4": "",
"DAY 5": ""
}
]
英文:
As per looking at your tabular UI, you need to convert your API data in the below format where each row would have all 5 days' data.
[
{
// Day 1,
// Day 2,
// Day 3,
// Day 4,
// Day 5
},
{
// Day 1,
// Day 2,
// Day 3,
// Day 4,
// Day 5
}
]
Try the below logic in your getWeekScheduleList function. I added the respective comments to explain the code.
<!-- begin snippet: js hide: false console: false babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="weekScheduleList"
disable-pagination
hide-default-footer
>
</v-data-table>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
weekScheduleList: [],
theme: "",
headers: [{
text: "DAY 1",
value: "DAY 1",
align: 'center',
sortable: true
},
{
text: "DAY 2",
value: "DAY 2",
align: 'center',
sortable: true
},
{
text: "DAY 3",
value: "DAY 3",
align: 'center',
sortable: true
},
{
text: "DAY 4",
value: "DAY 4",
align: 'center',
sortable: true
},
{
text: "DAY 5",
value: "DAY 5",
align: 'center',
sortable: true
},
],
api_data: [{
id: "7658dc9e-5720-4544-8780-761e1993a8a3",
folderMapID: "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
themeName: "test",
classTime: 45,
dayName: "DAY 2",
isActive: true,
weekDay: [{
id: "2cebd6c7-339d-4d99-a199-b1c145211272",
position: 1,
theme: "QA Theme One",
themeTime: 14,
title: "test title",
isActive: true,
}, ],
},
{
id: "8f638849-6e54-4949-b404-300aa2c8a0c0",
folderMapID: "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
themeName: "Butterfly Theme",
classTime: 60,
dayName: "DAY 1",
isActive: true,
weekDay: [{
id: "3796dac9-18b0-4dd4-912f-8aeeede84e6b",
position: 1,
theme: "Music Theme",
themeTime: 10,
title: "singing practice",
isActive: true,
},
{
id: "57b8f608-d2ad-4f7b-807b-db75aa0d10a9",
position: 2,
theme: "Dance Theme",
themeTime: 15,
title: "learn dance steps",
isActive: true,
},
{
id: "d395b047-2847-474a-a553-afbd93782092",
position: 3,
theme: "QA Theme One",
themeTime: 20,
title: "QA testing",
isActive: true,
},
],
},
],
};
},
mounted() {
this.getWeekScheduleList();
},
methods: {
getWeekScheduleList: async function() {
try {
var api_data = this.api_data;
var total_days = 5;
// Sort the api data by day's name first
api_data.sort(function(a, b) {
return a.dayName.localeCompare(b.dayName);
});
// Find the item which has maximum weedays
let max_weekday_item = this.api_data.find((item) =>
Math.max(item.weekDay.length)
);
// Outer loop for row - API data
for (
let rowIndex = 0; rowIndex < max_weekday_item.weekDay.length; rowIndex++
) {
const row = {};
// Inner loop for column
for (let colIndex = 1; colIndex <= total_days; colIndex++) {
// Find the item of respective day number
let day_item = this.api_data.find((item) => {
return item.dayName === `DAY ${colIndex}`;
});
/**
* If found then assign like this-
* row['DAY 1'] = Day 1's weekday data
* row['DAY 2'] = Day 2's weekday data
*/
if (day_item) {
row[`DAY ${colIndex}`] = day_item.weekDay[rowIndex] ?
`${day_item.weekDay[rowIndex].theme} - ${day_item.weekDay[rowIndex].themeTime} mins - ${day_item.weekDay[rowIndex].title}` :
"";
}
// Else leave it empty
else {
row[`DAY ${colIndex}`] = "";
}
}
// Push this row's data in the array
this.weekScheduleList.push(row);
}
} catch (e) {
console.error(e);
}
},
},
})
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论