Angular фильтр наблюдаемый объект - PullRequest
Новая
       0

Angular фильтр наблюдаемый объект

0 голосов
/ 07 марта 2020

Мне нужна помощь в фильтрации объекта данных json только для трамваев, направляющихся на указанную станцию ​​c. вот мой код. 

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": []
    }
}
Я просто хочу знать, как фильтровать эти данные, чтобы получить только трамваи, скрывающиеся в конкретном c городе, который я могу указать. Вот документация API: https://www.trafiklab.se/node/15754/documentation

Ответы [ 2 ]

4 голосов
/ 07 марта 2020

Во-первых, нет необходимости преобразовывать наблюдаемые в обещания - вы теряете силу Rx JS, делая это.

Во-вторых, это плохая практика - делать что-то кроме простой настройки в конструктор Вместо этого инициализируйте компонент в 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);
  }
}

Вы не указали, как указывается пункт назначения или нужен ли он с учетом регистра. Я жестко запрограммировал пункт назначения и провел сравнение с учетом регистра в целях простого примера.

DEMO: https://stackblitz.com/edit/angular-54g5ah

2 голосов
/ 07 марта 2020

Ответ - это объект, и просто назовите его как атрибуты объекта, как показано ниже. Затем используйте метод фильтра с условием фильтра.

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'));
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...