I need to compare two sets of data - one fetched from the server and the other being default data.
Data retrieved from the server:
[
{
"id": 7,
"day": "14 April 2017",
"time_list": [
{
"id": 25,
"time": "11:00 AM",
},
{
"id": 28,
"time": "08:00 PM",
}
]
},
{
"id": 7,
"day": "13 April 2017",
"time_list": [
{
"id": 33,
"time": "11:00 AM",
},
{
"id": 22,
"time": "02:00 PM",
},
]
},
]
Default data for the Vue JavaScript component:
default_time_data: ["11:00 AM", "02:00 Pm", "05:00 PM", "08:00 PM"]
In the template, I want to achieve the following:
<template>
<div v-for="day in show_routine_data">
Check if the time from the day.time_list matches the showTime_count
For each default_time in default_time_data, check if any time in day.time_list is equal.
If a match is found, display its id.
Otherwise, show no data
</div>
</template>
Hopefully that's clear, but feel free to ask if not. I've been struggling with this issue all morning and would appreciate your help.
Update:
The final displayed data should look like this (based on the provided data):
<ul>
<li>
<p>14th April 2017</p>
<ul>
<li><p> 25 </p></li>
<li><p> No data </p></li>
<li><p> No data </p></li>
<li><p> 28 </p></li>
<ul>
<li>
<li>
<p>13th April 2017</p>
<ul>
<li><p> 33 </p></li>
<li><p> 22 </p></li>
<li><p> No data </p></li>
<li><p> No data </p></li>
<ul>
<li>
</ul>