Populating data after check from JSON data - json

Question

I'm kind of confused and after spending a lot of time on it, I have not found any good solution to my problem. So without even wasting my time I'm explaining my question.
I have a JSON data, with a data[] having different objects which looks like this :
{
"data": [
{
"id": 1,
"name": "XYZ",
"course": {
"id": 25,
"name": "XYZ",
"description": "",
"teacher": {
"id": 4,
"name": "",
"email": "",
"role": "",
"token": "",
"about": "Blah blah blah ",
"phone": "2222222222",
"image_url": "",
"payment_information": {}
},
"image": "",
"cover_image": "",
"course_type": "",
"ongoing": true,
"price": 10,
"students_count": 4,
"lesson_price": 2.5,
"drop_in_price": 12,
"lessons_data": {
"first_lesson_at": "",
"last_lesson_at": "",
"next_lesson_at": ""
},
"data": {
"number_of_classes": "",
"start_time": "06:45",
"day_of_week": "Tuesday",
"duration": "-300",
"start_date": "2017-11-07T06:45:04.000-0800",
"end_time": "06:50"
}
},
"start_time": "2018-01-23T14:45:00.000Z",
"end_time": "2018-01-23T14:50:00.000Z",
"zoom_url": "http://zoom.us/j/5124648907"
}
]
}
This is only one object which I just showed it to you but there are many other objects present inside the data array.
I have a widget which has a block and accepts the title and the , we will look at the later. So for this first I want to loop through the data object and check if the timestamps' date is matching with the other one or not and then get the particular amount of that widget after using *ngFor in my html
For now I have 7 object inside the JSON data and after getting the result from the timestamps I have 4 objects which has similar start_time (2 same and other 2 same).
More pieces of the information :
JSON data
1 with Wednesday from Timestamp
2 objects with Thursday from Timestamp
2 Objects with Friday from Timestamp
1 with Saturday from Timestamp
So according to the above data we have to get only 4 blocks, but I have tried finding some solution to it but failed.
I have tried doing this
<div *ngFor="les lesson of lessons">
<widget-app-block [title]="lesson.start_time | date: 'EEEE, MMMM d'"></widget-app-block>
</div>
But it prints all the 7 blocks and prints the Time for all the 7 blocks. But what we need here to get only 4 blocks which would be sorted after checking.
POSSIBLE ATTEMPTS
I have read about using *ngIF-else condition from HERE, so what I have done is I have tried getting the results from my TYPESCRIPT file and tried matching it with the lesson variable from the foreach loop in my html and then pass the title else just print the timestamp for individual objects but didn't work out.
TYPESCRIPT
ngAfterViewInit() {
this.http.get("/lessons").subscribe(data => {
this.lessons = castCollection(data['data'], Lesson)
for(let time of this.lessons){
this.timeTitle = time.start_time
}
})
}
and then comparing it to the lesson variable in my html
HTML
<div *ngFor="let lesson of lessons">
<div *ngIf="lesson.start_time === timeTitle; else elseTimeBlock">
<widget-app-block [title]="timeTitle | date: 'EEEE, MMMM d'"></widget-app-block>
</div>
<ng-template #elseTimeBlock>
<widget-app-block [title]="lesson_start_time | date: 'EEEE, MMMM d'"></widget-app-block>
</ng-template>
</div>
But no luck. Since my data fetching is working fine so, now I have to just focus on the data itself. Could any one please help me with this. I'd be grateful to learn new thing. Since this is very tricky.

Answer 1

It sounds like what you need is to filter your list to match a particular timestamp. I have a blog post here on filtering data in Angular: https://blogs.msmvps.com/deborahk/filtering-in-angular/
Something like this:
performFilter(filterBy: string): IProduct[] {
filterBy = filterBy.toLocaleLowerCase();
return this.products.filter((product: IProduct) =>
product.productName.toLocaleLowerCase().indexOf(filterBy) !== -1);
}
I've filtering on a string, but you could change this to filter on a timestamp instead.
See the blog post for the full code.