Angular filter Observable object

Question

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": [] } }

I just want to know how to filter this data to get only trams hiding to a specific city that I can specify. here is the API documentation : https://www.trafiklab.se/node/15754/documentation

Answer 1

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

Answer 2

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'));