小贝子编程

角度过滤器可观察对象



我需要帮助过滤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": []
    }
}
我只想知道如何过滤这些数据，只让有轨电车隐藏在我可以指定的特定城市。以下是API文档：https://www.trafiklab.se/node/15754/documentation

首先，不需要将可观察性转换为承诺-这样做会失去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);
  }
}

您还没有指定目标是如何提供的，也没有指定它是否需要是区分大小写的筛选器。为了一个简单的例子，我对目的地进行了硬编码，并进行了区分大小写的比较。

演示：https://stackblitz.com/edit/angular-54g5ah

响应是一个对象，只需像以下对象属性一样调用它。然后根据过滤条件使用过滤方法。

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

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium