2023年2月14日 19:08:50go评论53阅读模式

英文:

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 -

[
{
&quot;id&quot;: &quot;7658dc9e-5720-4544-8780-761e1993a8a3&quot;,
&quot;folderMapID&quot;: &quot;d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1&quot;,
&quot;themeName&quot;: &quot;test&quot;,
&quot;classTime&quot;: 45,
&quot;dayName&quot;: &quot;DAY 2&quot;,
&quot;isActive&quot;: true,
&quot;weekDay&quot;: [
{
&quot;id&quot;: &quot;2cebd6c7-339d-4d99-a199-b1c145211272&quot;,
&quot;position&quot;: 1,
&quot;theme&quot;: &quot;QA Theme One&quot;,
&quot;themeTime&quot;: 14,
&quot;title&quot;: &quot;test title&quot;,
&quot;isActive&quot;: true
}
]
},
{
&quot;id&quot;: &quot;8f638849-6e54-4949-b404-300aa2c8a0c0&quot;,
&quot;folderMapID&quot;: &quot;d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1&quot;,
&quot;themeName&quot;: &quot;Butterfly Theme&quot;,
&quot;classTime&quot;: 60,
&quot;dayName&quot;: &quot;DAY 1&quot;,
&quot;isActive&quot;: true,
&quot;weekDay&quot;: [
{
&quot;id&quot;: &quot;3796dac9-18b0-4dd4-912f-8aeeede84e6b&quot;,
&quot;position&quot;: 1,
&quot;theme&quot;: &quot;Music Theme&quot;,
&quot;themeTime&quot;: 10,
&quot;title&quot;: &quot;singing practice&quot;,
&quot;isActive&quot;: true
},
{
&quot;id&quot;: &quot;57b8f608-d2ad-4f7b-807b-db75aa0d10a9&quot;,
&quot;position&quot;: 2,
&quot;theme&quot;: &quot;Dance Theme&quot;,
&quot;themeTime&quot;: 15,
&quot;title&quot;: &quot;learn dance steps&quot;,
&quot;isActive&quot;: true
},
{
&quot;id&quot;: &quot;d395b047-2847-474a-a553-afbd93782092&quot;,
&quot;position&quot;: 3,
&quot;theme&quot;: &quot;QA Theme One&quot;,
&quot;themeTime&quot;: 20,
&quot;title&quot;: &quot;QA testing&quot;,
&quot;isActive&quot;: true
}
]
}
]

HTML template -

&lt;v-data-table :headers=&quot;headers&quot; :items=&quot;weekScheduleList&quot; disable-pagination
hide-default-footer&gt;
&lt;template v-slot:no-data&gt;
&lt;v-card-subtitle class=&quot;d-flex justify-center&quot;&gt;No Data Available&lt;/v-card-subtitle&gt;
&lt;/template&gt;
&lt;/v-data-table&gt;

 export default {
data () {
return {
weekScheduleList: [],
theme: &#39;&#39;,
headers: [
{ text: &#39;DAY 1&#39;, value: &#39;theme&#39;, align: &#39;center&#39;, sortable: true },
{ text: &#39;DAY 2&#39;, value: &#39;0&#39;, align: &#39;center&#39;, sortable: true },
{ text: &#39;DAY 3&#39;, value: &#39;0&#39;, align: &#39;center&#39;, sortable: true },
{ text: &#39;DAY 4&#39;, value: &#39;0&#39;, align: &#39;center&#39;, sortable: true },
{ text: &#39;DAY 5&#39;, value: &#39;0&#39;, align: &#39;center&#39;, 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 =&gt; {
const row = {
day: day.dayName
}
day.weekDay.forEach(weekDay =&gt; {
row[weekDay.theme] = `${weekDay.theme} - ${weekDay.themeTime} mins - ${weekDay.title}`
})
newData.push(row)
})
this.weekScheduleList = newData
console.log(&#39;this.weekScheduleList :&#39;, this.weekScheduleList) 
} catch (e) {
const errorMessage = (e &amp;&amp; e.response &amp;&amp; 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.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css&quot; rel=&quot;stylesheet&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&quot;app&quot;&gt;
&lt;v-app id=&quot;inspire&quot;&gt;
&lt;v-data-table
:headers=&quot;headers&quot;
:items=&quot;weekScheduleList&quot;
disable-pagination
hide-default-footer
&gt;
&lt;/v-data-table&gt;
&lt;/v-app&gt;
&lt;/div&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
new Vue({
el: &#39;#app&#39;,
vuetify: new Vuetify(),
data() {
return {
weekScheduleList: [],
theme: &quot;&quot;,
headers: [{
text: &quot;DAY 1&quot;,
value: &quot;DAY 1&quot;,
align: &#39;center&#39;,
sortable: true
},
{
text: &quot;DAY 2&quot;,
value: &quot;DAY 2&quot;,
align: &#39;center&#39;,
sortable: true
},
{
text: &quot;DAY 3&quot;,
value: &quot;DAY 3&quot;,
align: &#39;center&#39;,
sortable: true
},
{
text: &quot;DAY 4&quot;,
value: &quot;DAY 4&quot;,
align: &#39;center&#39;,
sortable: true
},
{
text: &quot;DAY 5&quot;,
value: &quot;DAY 5&quot;,
align: &#39;center&#39;,
sortable: true
},
],
api_data: [{
id: &quot;7658dc9e-5720-4544-8780-761e1993a8a3&quot;,
folderMapID: &quot;d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1&quot;,
themeName: &quot;test&quot;,
classTime: 45,
dayName: &quot;DAY 2&quot;,
isActive: true,
weekDay: [{
id: &quot;2cebd6c7-339d-4d99-a199-b1c145211272&quot;,
position: 1,
theme: &quot;QA Theme One&quot;,
themeTime: 14,
title: &quot;test title&quot;,
isActive: true,
}, ],
},
{
id: &quot;8f638849-6e54-4949-b404-300aa2c8a0c0&quot;,
folderMapID: &quot;d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1&quot;,
themeName: &quot;Butterfly Theme&quot;,
classTime: 60,
dayName: &quot;DAY 1&quot;,
isActive: true,
weekDay: [{
id: &quot;3796dac9-18b0-4dd4-912f-8aeeede84e6b&quot;,
position: 1,
theme: &quot;Music Theme&quot;,
themeTime: 10,
title: &quot;singing practice&quot;,
isActive: true,
},
{
id: &quot;57b8f608-d2ad-4f7b-807b-db75aa0d10a9&quot;,
position: 2,
theme: &quot;Dance Theme&quot;,
themeTime: 15,
title: &quot;learn dance steps&quot;,
isActive: true,
},
{
id: &quot;d395b047-2847-474a-a553-afbd93782092&quot;,
position: 3,
theme: &quot;QA Theme One&quot;,
themeTime: 20,
title: &quot;QA testing&quot;,
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&#39;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) =&gt;
Math.max(item.weekDay.length)
);
// Outer loop for row - API data
for (
let rowIndex = 0; rowIndex &lt; max_weekday_item.weekDay.length; rowIndex++
) {
const row = {};
// Inner loop for column
for (let colIndex = 1; colIndex &lt;= total_days; colIndex++) {
// Find the item of respective day number
let day_item = this.api_data.find((item) =&gt; {
return item.dayName === `DAY ${colIndex}`;
});
/**
* If found then assign like this-
* row[&#39;DAY 1&#39;] = Day 1&#39;s weekday data
* row[&#39;DAY 2&#39;] = Day 2&#39;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}` :
&quot;&quot;;
}
// Else leave it empty
else {
row[`DAY ${colIndex}`] = &quot;&quot;;
}
}
// Push this row&#39;s data in the array
this.weekScheduleList.push(row);
}
} catch (e) {
console.error(e);
}
},
},
})
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何从数据表中提取给定格式的数据？

问题

答案1

将属性添加到对象而不使用展开操作符。

如何在按钮上显示星期几？

Node.js：通过Unix套接字发送GET请求

在TypeScript中如何统计字符串在字符串数组中的出现次数？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论