user3082488
Reputation: 71
Angular filter Observable object
I need help filtering the json data object for only trams that are heading to a specific station. here is my code.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tram';
url:string = `https://api.sl.se/api2/realtimedeparturesV4.json?key=c3fa612773d9439699d02d0d069549ce&SiteID=1555&timewindow=60`;
constructor(private http: HttpClient) {
this.http.get(this.url).toPromise().then(data =>{
console.log(data);
});
}
}here is how my returned object :
{
"StatusCode": 0,
"Message": null,
"ExecutionTime": 73,
"ResponseData": {
"LatestUpdate": "2020-03-07T16:28:06",
"DataAge": 35,
"Metros": [],
"Buses": [
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Mariatorget via Södersjukhuset",
"JourneyDirection": 2,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10684,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T16:38:00",
"ExpectedDateTime": "2020-03-07T16:38:00",
"DisplayTime": "9 min",
"JourneyNumber": 44078,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Sickla udde",
"JourneyDirection": 1,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10687,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T16:37:00",
"ExpectedDateTime": "2020-03-07T16:38:39",
"DisplayTime": "9 min",
"JourneyNumber": 44111,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Sickla udde",
"JourneyDirection": 1,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10687,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T16:57:00",
"ExpectedDateTime": "2020-03-07T16:57:00",
"DisplayTime": "28 min",
"JourneyNumber": 44112,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Mariatorget via Södersjukhuset",
"JourneyDirection": 2,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10684,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T16:58:00",
"ExpectedDateTime": "2020-03-07T16:58:00",
"DisplayTime": "16:58",
"JourneyNumber": 44079,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Sickla udde",
"JourneyDirection": 1,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10687,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T17:17:00",
"ExpectedDateTime": "2020-03-07T17:17:00",
"DisplayTime": "17:17",
"JourneyNumber": 44113,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Mariatorget via Södersjukhuset",
"JourneyDirection": 2,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10684,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T17:18:00",
"ExpectedDateTime": "2020-03-07T17:18:00",
"DisplayTime": "17:18",
"JourneyNumber": 44080,
"Deviations": null
}
],
"Trains": [],
"Trams": [
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T16:33:00",
"ExpectedDateTime": "2020-03-07T16:33:58",
"DisplayTime": "5 min",
"JourneyNumber": 21548,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T16:33:30",
"ExpectedDateTime": "2020-03-07T16:35:12",
"DisplayTime": "6 min",
"JourneyNumber": 11627,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T16:43:30",
"ExpectedDateTime": "2020-03-07T16:43:30",
"DisplayTime": "16:43",
"JourneyNumber": 11637,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T16:43:00",
"ExpectedDateTime": "2020-03-07T16:44:50",
"DisplayTime": "16 min",
"JourneyNumber": 21558,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T16:53:30",
"ExpectedDateTime": "2020-03-07T16:53:30",
"DisplayTime": "16:53",
"JourneyNumber": 11647,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T16:53:00",
"ExpectedDateTime": "2020-03-07T16:53:59",
"DisplayTime": "25 min",
"JourneyNumber": 21608,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T17:03:30",
"ExpectedDateTime": "2020-03-07T17:03:30",
"DisplayTime": "17:03",
"JourneyNumber": 11657,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T17:03:00",
"ExpectedDateTime": "2020-03-07T17:05:56",
"DisplayTime": "17:03",
"JourneyNumber": 21618,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T17:13:30",
"ExpectedDateTime": "2020-03-07T17:13:30",
"DisplayTime": "17:13",
"JourneyNumber": 11707,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T17:13:00",
"ExpectedDateTime": "2020-03-07T17:14:48",
"DisplayTime": "17:13",
"JourneyNumber": 21628,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T17:23:00",
"ExpectedDateTime": "2020-03-07T17:23:00",
"DisplayTime": "17:23",
"JourneyNumber": 21638,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T17:23:30",
"ExpectedDateTime": "2020-03-07T17:23:30",
"DisplayTime": "17:23",
"JourneyNumber": 11717,
"Deviations": null
}
],
"Ships": [],
"StopPointDeviations": []
}
}Upvotes: 0
Views: 57
Answers (2)
Kurt Hamilton
Reputation: 13515
Firstly, there's no need to convert observables to promises - you're losing out on the power of RxJS by doing this.
Secondly, it's bad practice to do anything other than trivial setup in the constructor. Instead, initialise the component in ngOnInit.
Once you have the response data in your subscribe, you can simply use an array filter to get the trams you want.
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'Tram';
url:string = `https://api.sl.se/api2/realtimedeparturesV4.json?key=c3fa612773d9439699d02d0d069549ce&SiteID=1555&timewindow=60`;
constructor(private http: HttpClient) {
}
ngOnInit() {
this.http.get(this.url).subscribe((data: any) =>{
const trams = data.ResponseData.Trams;
const sicklaTrams = this.filterTrams(trams, 'Sickla');
console.log(sicklaTrams);
});
}
private filterTrams(trams: any[], destination: string): any[] {
return trams.filter(tram => tram.Destination === destination);
}
}
You've not specified how the destination is provided, or whether it needs to be a case-sensitive filter. I've hard coded a destination and performed a case-sensitive comparison for the purposes of a simple example.
DEMO: https://stackblitz.com/edit/angular-54g5ah
Upvotes: 4
AbdurrahmanY
Reputation: 883
The response is an object and just call it like object attributes like following. Then use filter method with the filter condition.
myResult.ResponseData.Trams.filter(t=> t.Destination=='Solna station')
let myResult = {
"StatusCode": 0,
"Message": null,
"ExecutionTime": 73,
"ResponseData": {
"LatestUpdate": "2020-03-07T16:28:06",
"DataAge": 35,
"Metros": [],
"Buses": [
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Mariatorget via Södersjukhuset",
"JourneyDirection": 2,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10684,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T16:38:00",
"ExpectedDateTime": "2020-03-07T16:38:00",
"DisplayTime": "9 min",
"JourneyNumber": 44078,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Sickla udde",
"JourneyDirection": 1,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10687,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T16:37:00",
"ExpectedDateTime": "2020-03-07T16:38:39",
"DisplayTime": "9 min",
"JourneyNumber": 44111,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Sickla udde",
"JourneyDirection": 1,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10687,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T16:57:00",
"ExpectedDateTime": "2020-03-07T16:57:00",
"DisplayTime": "28 min",
"JourneyNumber": 44112,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Mariatorget via Södersjukhuset",
"JourneyDirection": 2,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10684,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T16:58:00",
"ExpectedDateTime": "2020-03-07T16:58:00",
"DisplayTime": "16:58",
"JourneyNumber": 44079,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Sickla udde",
"JourneyDirection": 1,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10687,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T17:17:00",
"ExpectedDateTime": "2020-03-07T17:17:00",
"DisplayTime": "17:17",
"JourneyNumber": 44113,
"Deviations": null
},
{
"GroupOfLine": null,
"TransportMode": "BUS",
"LineNumber": "74",
"Destination": "Mariatorget via Södersjukhuset",
"JourneyDirection": 2,
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 10684,
"StopPointNumber": 10684,
"StopPointDesignation": null,
"TimeTabledDateTime": "2020-03-07T17:18:00",
"ExpectedDateTime": "2020-03-07T17:18:00",
"DisplayTime": "17:18",
"JourneyNumber": 44080,
"Deviations": null
}
],
"Trains": [],
"Trams": [
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T16:33:00",
"ExpectedDateTime": "2020-03-07T16:33:58",
"DisplayTime": "5 min",
"JourneyNumber": 21548,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T16:33:30",
"ExpectedDateTime": "2020-03-07T16:35:12",
"DisplayTime": "6 min",
"JourneyNumber": 11627,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T16:43:30",
"ExpectedDateTime": "2020-03-07T16:43:30",
"DisplayTime": "16:43",
"JourneyNumber": 11637,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T16:43:00",
"ExpectedDateTime": "2020-03-07T16:44:50",
"DisplayTime": "16 min",
"JourneyNumber": 21558,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T16:53:30",
"ExpectedDateTime": "2020-03-07T16:53:30",
"DisplayTime": "16:53",
"JourneyNumber": 11647,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T16:53:00",
"ExpectedDateTime": "2020-03-07T16:53:59",
"DisplayTime": "25 min",
"JourneyNumber": 21608,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T17:03:30",
"ExpectedDateTime": "2020-03-07T17:03:30",
"DisplayTime": "17:03",
"JourneyNumber": 11657,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T17:03:00",
"ExpectedDateTime": "2020-03-07T17:05:56",
"DisplayTime": "17:03",
"JourneyNumber": 21618,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T17:13:30",
"ExpectedDateTime": "2020-03-07T17:13:30",
"DisplayTime": "17:13",
"JourneyNumber": 11707,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T17:13:00",
"ExpectedDateTime": "2020-03-07T17:14:48",
"DisplayTime": "17:13",
"JourneyNumber": 21628,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Sickla",
"JourneyDirection": 2,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4528,
"StopPointDesignation": "2",
"TimeTabledDateTime": "2020-03-07T17:23:00",
"ExpectedDateTime": "2020-03-07T17:23:00",
"DisplayTime": "17:23",
"JourneyNumber": 21638,
"Deviations": null
},
{
"TransportMode": "TRAM",
"LineNumber": "22",
"Destination": "Solna station",
"JourneyDirection": 1,
"GroupOfLine": "Tvärbanan",
"StopAreaName": "Mårtensdal",
"StopAreaNumber": 4527,
"StopPointNumber": 4527,
"StopPointDesignation": "1",
"TimeTabledDateTime": "2020-03-07T17:23:30",
"ExpectedDateTime": "2020-03-07T17:23:30",
"DisplayTime": "17:23",
"JourneyNumber": 11717,
"Deviations": null
}
],
"Ships": [],
"StopPointDeviations": []
}
}
console.log(myResult.ResponseData.Trams.filter(t=> t.Destination=='Solna station'));Upvotes: 1
Related Questions
- Observable rxjs filter
- Angular filter Observable array
- Filter Observable by property of array of objects
- Filter observable array by object property
- Use Array.filter on object array in observable
- Filter an array of objects using an Observable filter
- Angular RxJS Observable Filter on array of objects
- Filtering the array of an observable object that's being filtered TypeScript
- Angular2 Observable Filter
- Angular 2 how to filter object in view