我需要帮助，仅过滤前往特定车站的电车的json数据对象。 这是我的代码。
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);
});
}
}
这是我返回的对象的方式：
{
"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": []
}
}
答案 0 :(得分：4)
首先，不需要将可观察变量转换为Promise-这样您就失去了RxJS的功能。
第二，除了在构造函数中进行微不足道的设置外，不做任何其他事情都是不好的做法。而是在ngOnInit中初始化组件。
一旦您的订阅中包含响应数据，您就可以简单地使用数组filter来获取所需的电车。
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);
}
}
您尚未指定目的地的提供方式，或是否需要区分大小写的过滤器。为了简单的示例，我已经硬编码了目的地，并进行了区分大小写的比较。
答案 1 :(得分：1)
响应是一个对象，就像对象属性一样调用它，如下所示。然后使用具有过滤条件的过滤方法。
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'));