Как разобраться в HTTP GET Response, чтобы получить по одному элементу за один раз с Angular 5 - PullRequest
Новая
       42

Как разобраться в HTTP GET Response, чтобы получить по одному элементу за один раз с Angular 5

0 голосов
/ 07 июня 2018

Это мой код для моего DataService, где я отображаю свои регионы: 

 import { Injectable, OnInit } from '@angular/core';
    import { HttpClient, HttpParams } from "@angular/common/http"
    import { Observable } from 'rxjs/Observable';
    import { Data } from '../models/data.model'
    import { Region } from '../models/region.model';
    import 'rxjs/add/operator/catch';
    import 'rxjs/add/operator/map';
    import 'rxjs/add/operator/switchMap';



    @Injectable()
    export class DataService {
      dukeProgress: string;
      dukeCarolinas: string;
      dukeFlorida: string;
      dukeMidWest: string;


      constructor(private httpClient: HttpClient,
      ) { }

     getRegion() {
        return this.httpClient.get('http://example.com/otdcc/v1/cc/regions').map(
          (region: Region[]) => {
            const regions = region
            for (const region of regions)
              return region;
          }
        );
      }
    }

Это мой код в моем компоненте, на который я подписываюсь: 

  showRegions() {
    this.dataService.getRegion().subscribe(
      data => {
        console.log('this is the data:' + ' ' + data)
        this.dataSource = new MatTableDataSource<Opcenter[]>(<any>data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      err => {
        this.showSearchBox = true;
      }
    )
    this.showSearchBox = true;
  }

Я хочубыть в состоянии отсортировать ответ, который я получаю от моего запроса GET, и извлекать по одному объекту за раз из ответа, чтобы использовать его в другой функции, для которой требуются данные, которые я получаю из ответа (HTTP-запрос поста), ноЯ тоже не знаю как.Я посмотрел на примеры, но я, кажется, не понимаю.Может кто-нибудь, пожалуйста, разбить это шаг за шагом?Или, если не по крайней мере, направить меня в правильном направлении?Я знаю, что должен использовать JSON.Parse и использовать его в массиве, но я не уверен, будет ли он там, где я на него подпишусь?Я не уверен.Пожалуйста помоги!

1 Ответ

0 голосов
/ 08 июня 2018

Observable представляет асинхронные потоки данных или испускает последовательность элементов во времени
Http является протоколом запроса-ответа и возвращает observable, но в отличие от определения, он не выдает значения во временивместо этого вы делаете запрос, получаете полный ответ он не поступает асинхронно и выполняется. Observable никогда не отправляется снова, если вы не делаете новый запрос.

HttpClient упрощаетэргономика по умолчанию (вам больше не нужно отображать в json), и теперь он поддерживает типизированные возвращаемые значения. 

getRegion():Observable<Region[]> {
        return this.httpClient.get<Region[]>('http://example.com/otdcc/v1/cc/regions')}

Http возвращает observable, и мы можем указать HttpClient.get, чтобы он возвратил response как тип региона. Когда мы используем http.get<Region[]>(...), он возвращает экземпляр типа Observable<Region[]>.

. Чтобы передать один объект за раз, вы можете использовать forEach, который выполняет предоставленныйФункция один раз для каждого элемента массива внутри вашего обратного вызова подписки, который гарантирует, что ваш метод вызывается после разрешения вашей подписки.

Измененный код 

    showRegions() {
        this.dataService.getRegion().subscribe(
          data => {
              data.forEach(value=>this.myMethod(value));
            console.log('this is the data:' + ' ' + data)
            this.dataSource = new MatTableDataSource<Opcenter[]>(<any>data);
            this.dataSource.paginator = this.paginator;
            this.dataSource.sort = this.sort;
          },
          err => {
            this.showSearchBox = true;
          }
        )
        this.showSearchBox = true;
      }

  myMethod(data:Region)
{
   console.log(data);//your logic
}

Демонстрационная версия

...