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

huangapple
go评论96阅读模式
英文:

How to fetch data from given format on datatable?

问题

我试图编写逻辑来在数据表中显示数据。下面是我需要显示的表格。

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

将只有5列，从Day1到Day5。在行中，如果dayName='DAY 1'，则需要获取在weekDay数组中的数据，如Music Theme（这是weekDay数组中theme键的值）。10分钟是themeTime，歌唱练习是title等等。

以下是数据的格式 -

  1. [
  2.     {
  3.         "id": "7658dc9e-5720-4544-8780-761e1993a8a3",
  4.         "folderMapID": "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
  5.         "themeName": "test",
  6.         "classTime": 45,
  7.         "dayName": "DAY 2",
  8.         "isActive": true,
  9.         "weekDay": [
  10.             {
  11.                 "id": "2cebd6c7-339d-4d99-a199-b1c145211272",
  12.                 "position": 1,
  13.                 "theme": "QA Theme One",
  14.                 "themeTime": 14,
  15.                 "title": "test title",
  16.                 "isActive": true
  17.             }
  18.         ]
  19.     },
  20.     {
  21.         "id": "8f638849-6e54-4949-b404-300aa2c8a0c0",
  22.         "folderMapID": "d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1",
  23.         "themeName": "Butterfly Theme",
  24.         "classTime": 60,
  25.         "dayName": "DAY 1",
  26.         "isActive": true,
  27.         "weekDay": [
  28.             {
  29.                 "id": "3796dac9-18b0-4dd4-912f-8aeeede84e6b",
  30.                 "position": 1,
  31.                 "theme": "Music Theme",
  32.                 "themeTime": 10,
  33.                 "title": "singing practice",
  34.                 "isActive": true
  35.             },
  36.             {
  37.                 "id": "57b8f608-d2ad-4f7b-807b-db75aa0d10a9",
  38.                 "position": 2,
  39.                 "theme": "Dance Theme",
  40.                 "themeTime": 15,
  41.                 "title": "learn dance steps",
  42.                 "isActive": true
  43.             },
  44.             {
  45.                 "id": "d395b047-2847-474a-a553-afbd93782092",
  46.                 "position": 3,
  47.                 "theme": "QA Theme One",
  48.                 "themeTime": 20,
  49.                 "title": "QA testing",
  50.                 "isActive": true
  51.             }
  52.         ]
  53.     }
  54. ]

HTML模板 -

  1. <v-data-table :headers="headers" :items="weekScheduleList" disable-pagination
  2.     hide-default-footer>
  3.       <template v-slot:no-data>
  4.         <v-card-subtitle class="d-flex justify-center">No Data Available</v-card-subtitle>
  5.       </template>
  6. </v-data-table>
  1. export default {
  2.     data () {
  3.         return {
  4.             weekScheduleList: [],
  5.             theme: '',
  6.             headers: [
  7.                 { text: 'DAY 1', value: 'theme', align: 'center', sortable: true },
  8.                 { text: 'DAY 2', value: '0', align: 'center', sortable: true },
  9.                 { text: 'DAY 3', value: '0', align: 'center', sortable: true },
  10.                 { text: 'DAY 4', value: '0', align: 'center', sortable: true },
  11.                 { text: 'DAY 5', value: '0', align: 'center', sortable: true }
  12.             ],
  13.         }
  14.     },
  15.     methods: {
  16.         getWeekScheduleList: async function () {
  17.             try {
  18.                 this.isLoading = true
  19.                 let res = await http.get(`${CONSTANTS.API_URL}/api/get-week/${this.folderId}`)
  21.                 const days = res.data
  22.                 const newData = []
  24.                 days.forEach(day => {
  25.                     const row = {
  26.                         day: day.dayName
  27.                     }
  29.                     day.weekDay.forEach(weekDay => {
  30.                         row[weekDay.theme] = `${weekDay.theme} - ${weekDay.themeTime} mins - ${weekDay.title}`
  31.                     })
  33.                     newData.push(row)
  34.                 })
  36.                 this.weekScheduleList = newData
  38.                 console.log('this.weekScheduleList :', this.weekScheduleList)
  40.             } catch (e) {
  41.                 const errorMessage = (e && e.response && e.response.data.message) || e.message
  42.                 this.errMsg(errorMessage)
  43.             }
  44.         },
  45.     }
  46. }
英文:

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 -

  1. [
  2. {
  3. &quot;id&quot;: &quot;7658dc9e-5720-4544-8780-761e1993a8a3&quot;,
  4. &quot;folderMapID&quot;: &quot;d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1&quot;,
  5. &quot;themeName&quot;: &quot;test&quot;,
  6. &quot;classTime&quot;: 45,
  7. &quot;dayName&quot;: &quot;DAY 2&quot;,
  8. &quot;isActive&quot;: true,
  9. &quot;weekDay&quot;: [
  10. {
  11. &quot;id&quot;: &quot;2cebd6c7-339d-4d99-a199-b1c145211272&quot;,
  12. &quot;position&quot;: 1,
  13. &quot;theme&quot;: &quot;QA Theme One&quot;,
  14. &quot;themeTime&quot;: 14,
  15. &quot;title&quot;: &quot;test title&quot;,
  16. &quot;isActive&quot;: true
  17. }
  18. ]
  19. },
  20. {
  21. &quot;id&quot;: &quot;8f638849-6e54-4949-b404-300aa2c8a0c0&quot;,
  22. &quot;folderMapID&quot;: &quot;d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1&quot;,
  23. &quot;themeName&quot;: &quot;Butterfly Theme&quot;,
  24. &quot;classTime&quot;: 60,
  25. &quot;dayName&quot;: &quot;DAY 1&quot;,
  26. &quot;isActive&quot;: true,
  27. &quot;weekDay&quot;: [
  28. {
  29. &quot;id&quot;: &quot;3796dac9-18b0-4dd4-912f-8aeeede84e6b&quot;,
  30. &quot;position&quot;: 1,
  31. &quot;theme&quot;: &quot;Music Theme&quot;,
  32. &quot;themeTime&quot;: 10,
  33. &quot;title&quot;: &quot;singing practice&quot;,
  34. &quot;isActive&quot;: true
  35. },
  36. {
  37. &quot;id&quot;: &quot;57b8f608-d2ad-4f7b-807b-db75aa0d10a9&quot;,
  38. &quot;position&quot;: 2,
  39. &quot;theme&quot;: &quot;Dance Theme&quot;,
  40. &quot;themeTime&quot;: 15,
  41. &quot;title&quot;: &quot;learn dance steps&quot;,
  42. &quot;isActive&quot;: true
  43. },
  44. {
  45. &quot;id&quot;: &quot;d395b047-2847-474a-a553-afbd93782092&quot;,
  46. &quot;position&quot;: 3,
  47. &quot;theme&quot;: &quot;QA Theme One&quot;,
  48. &quot;themeTime&quot;: 20,
  49. &quot;title&quot;: &quot;QA testing&quot;,
  50. &quot;isActive&quot;: true
  51. }
  52. ]
  53. }
  54. ]

HTML template -

  1. &lt;v-data-table :headers=&quot;headers&quot; :items=&quot;weekScheduleList&quot; disable-pagination
  2. hide-default-footer&gt;
  3. &lt;template v-slot:no-data&gt;
  4. &lt;v-card-subtitle class=&quot;d-flex justify-center&quot;&gt;No Data Available&lt;/v-card-subtitle&gt;
  5. &lt;/template&gt;
  6. &lt;/v-data-table&gt;
  1.  export default {
  2. data () {
  3. return {
  4. weekScheduleList: [],
  5. theme: &#39;&#39;,
  6. headers: [
  7. { text: &#39;DAY 1&#39;, value: &#39;theme&#39;, align: &#39;center&#39;, sortable: true },
  8. { text: &#39;DAY 2&#39;, value: &#39;0&#39;, align: &#39;center&#39;, sortable: true },
  9. { text: &#39;DAY 3&#39;, value: &#39;0&#39;, align: &#39;center&#39;, sortable: true },
  10. { text: &#39;DAY 4&#39;, value: &#39;0&#39;, align: &#39;center&#39;, sortable: true },
  11. { text: &#39;DAY 5&#39;, value: &#39;0&#39;, align: &#39;center&#39;, sortable: true }
  12. ],
  13. }
  14. },
  15. methods: {
  16. getWeekScheduleList: async function () {
  17. try {
  18. this.isLoading = true
  19. let res = await http.get(`${CONSTANTS.API_URL}/api/get-week/${this.folderId}`)
  20. const days = res.data
  21. const newData = []
  22. days.forEach(day =&gt; {
  23. const row = {
  24. day: day.dayName
  25. }
  26. day.weekDay.forEach(weekDay =&gt; {
  27. row[weekDay.theme] = `${weekDay.theme} - ${weekDay.themeTime} mins - ${weekDay.title}`
  28. })
  29. newData.push(row)
  30. })
  31. this.weekScheduleList = newData
  32. console.log(&#39;this.weekScheduleList :&#39;, this.weekScheduleList) 
  33. } catch (e) {
  34. const errorMessage = (e &amp;&amp; e.response &amp;&amp; e.response.data.message) || e.message
  35. this.errMsg(errorMessage)
  36. } 
  37. },
  38. }

答案1

得分: 0

按照查看您的表格 UI，您需要将 API 数据转换为以下格式，其中每一行都包含所有 5 天的数据。

  1. [
  2.   {
  3.     "DAY 1": "Butterfly Theme - 10 mins - singing practice",
  4.     "DAY 2": "test - 14 mins - test title",
  5.     "DAY 3": "",
  6.     "DAY 4": "",
  7.     "DAY 5": ""
  8.   },
  9.   {
  10.     "DAY 1": "Butterfly Theme - 15 mins - learn dance steps",
  11.     "DAY 2": "",
  12.     "DAY 3": "test - 20 mins - QA testing",
  13.     "DAY 4": "",
  14.     "DAY 5": ""
  15.   }
  16. ]
英文:

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.

  1. [
  2. {
  3. // Day 1,
  4. // Day 2,
  5. // Day 3,
  6. // Day 4,
  7. // Day 5
  8. },
  9. {
  10. // Day 1,
  11. // Day 2,
  12. // Day 3,
  13. // Day 4,
  14. // Day 5
  15. }
  16. ]

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 -->

  1. &lt;!DOCTYPE html&gt;
  2. &lt;html&gt;
  3. &lt;head&gt;
  4. &lt;link href=&quot;https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  5. &lt;/head&gt;
  6. &lt;body&gt;
  7. &lt;div id=&quot;app&quot;&gt;
  8. &lt;v-app id=&quot;inspire&quot;&gt;
  9. &lt;v-data-table
  10. :headers=&quot;headers&quot;
  11. :items=&quot;weekScheduleList&quot;
  12. disable-pagination
  13. hide-default-footer
  14. &gt;
  15. &lt;/v-data-table&gt;
  16. &lt;/v-app&gt;
  17. &lt;/div&gt;
  18. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js&quot;&gt;&lt;/script&gt;
  19. &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js&quot;&gt;&lt;/script&gt;
  20. &lt;script&gt;
  21. new Vue({
  22. el: &#39;#app&#39;,
  23. vuetify: new Vuetify(),
  24. data() {
  25. return {
  26. weekScheduleList: [],
  27. theme: &quot;&quot;,
  28. headers: [{
  29. text: &quot;DAY 1&quot;,
  30. value: &quot;DAY 1&quot;,
  31. align: &#39;center&#39;,
  32. sortable: true
  33. },
  34. {
  35. text: &quot;DAY 2&quot;,
  36. value: &quot;DAY 2&quot;,
  37. align: &#39;center&#39;,
  38. sortable: true
  39. },
  40. {
  41. text: &quot;DAY 3&quot;,
  42. value: &quot;DAY 3&quot;,
  43. align: &#39;center&#39;,
  44. sortable: true
  45. },
  46. {
  47. text: &quot;DAY 4&quot;,
  48. value: &quot;DAY 4&quot;,
  49. align: &#39;center&#39;,
  50. sortable: true
  51. },
  52. {
  53. text: &quot;DAY 5&quot;,
  54. value: &quot;DAY 5&quot;,
  55. align: &#39;center&#39;,
  56. sortable: true
  57. },
  58. ],
  59. api_data: [{
  60. id: &quot;7658dc9e-5720-4544-8780-761e1993a8a3&quot;,
  61. folderMapID: &quot;d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1&quot;,
  62. themeName: &quot;test&quot;,
  63. classTime: 45,
  64. dayName: &quot;DAY 2&quot;,
  65. isActive: true,
  66. weekDay: [{
  67. id: &quot;2cebd6c7-339d-4d99-a199-b1c145211272&quot;,
  68. position: 1,
  69. theme: &quot;QA Theme One&quot;,
  70. themeTime: 14,
  71. title: &quot;test title&quot;,
  72. isActive: true,
  73. }, ],
  74. },
  75. {
  76. id: &quot;8f638849-6e54-4949-b404-300aa2c8a0c0&quot;,
  77. folderMapID: &quot;d56eb3ff-dc9f-477e-82b2-ffc29a12b9f1&quot;,
  78. themeName: &quot;Butterfly Theme&quot;,
  79. classTime: 60,
  80. dayName: &quot;DAY 1&quot;,
  81. isActive: true,
  82. weekDay: [{
  83. id: &quot;3796dac9-18b0-4dd4-912f-8aeeede84e6b&quot;,
  84. position: 1,
  85. theme: &quot;Music Theme&quot;,
  86. themeTime: 10,
  87. title: &quot;singing practice&quot;,
  88. isActive: true,
  89. },
  90. {
  91. id: &quot;57b8f608-d2ad-4f7b-807b-db75aa0d10a9&quot;,
  92. position: 2,
  93. theme: &quot;Dance Theme&quot;,
  94. themeTime: 15,
  95. title: &quot;learn dance steps&quot;,
  96. isActive: true,
  97. },
  98. {
  99. id: &quot;d395b047-2847-474a-a553-afbd93782092&quot;,
  100. position: 3,
  101. theme: &quot;QA Theme One&quot;,
  102. themeTime: 20,
  103. title: &quot;QA testing&quot;,
  104. isActive: true,
  105. },
  106. ],
  107. },
  108. ],
  109. };
  110. },
  111. mounted() {
  112. this.getWeekScheduleList();
  113. },
  114. methods: {
  115. getWeekScheduleList: async function() {
  116. try {
  117. var api_data = this.api_data;
  118. var total_days = 5;
  119. // Sort the api data by day&#39;s name first
  120. api_data.sort(function(a, b) {
  121. return a.dayName.localeCompare(b.dayName);
  122. });
  123. // Find the item which has maximum weedays
  124. let max_weekday_item = this.api_data.find((item) =&gt;
  125. Math.max(item.weekDay.length)
  126. );
  127. // Outer loop for row - API data
  128. for (
  129. let rowIndex = 0; rowIndex &lt; max_weekday_item.weekDay.length; rowIndex++
  130. ) {
  131. const row = {};
  132. // Inner loop for column
  133. for (let colIndex = 1; colIndex &lt;= total_days; colIndex++) {
  134. // Find the item of respective day number
  135. let day_item = this.api_data.find((item) =&gt; {
  136. return item.dayName === `DAY ${colIndex}`;
  137. });
  138. /**
  139. * If found then assign like this-
  140. * row[&#39;DAY 1&#39;] = Day 1&#39;s weekday data
  141. * row[&#39;DAY 2&#39;] = Day 2&#39;s weekday data
  142. */
  143. if (day_item) {
  144. row[`DAY ${colIndex}`] = day_item.weekDay[rowIndex] ?
  145. `${day_item.weekDay[rowIndex].theme} - ${day_item.weekDay[rowIndex].themeTime} mins - ${day_item.weekDay[rowIndex].title}` :
  146. &quot;&quot;;
  147. }
  148. // Else leave it empty
  149. else {
  150. row[`DAY ${colIndex}`] = &quot;&quot;;
  151. }
  152. }
  153. // Push this row&#39;s data in the array
  154. this.weekScheduleList.push(row);
  155. }
  156. } catch (e) {
  157. console.error(e);
  158. }
  159. },
  160. },
  161. })
  162. &lt;/script&gt;
  163. &lt;/body&gt;
  164. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月14日 19:08:50
  • 转载请务必保留本文链接：https://go.coder-hub.com/75446953.html
  • javascript
  • vuejs2
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定