Как выбрать элемент в массиве JSON и привязать его к представлению в ionic 3? - PullRequest
Новая
       8

Как выбрать элемент в массиве JSON и привязать его к представлению в ionic 3?

0 голосов
/ 06 ноября 2018

Я создаю приложение в ionic 3 и пытаюсь извлечь данные из URL.

Это мой код в data.ts и мой поставщик данных: 

   getVehicleStatus() {
    return this.http.get<VehicleStatus>(this.url);
  }

Это мой класс автомобиля: 

class VehicleStatus {
    status: string;
    plate: string;
    code: string;
    message: string;
}

Я вызываю метод в моем файле home.ts . 

  ionViewDidLoad() {
    console.log(this.getStatus('test3'));
  }

  getStatus(plate: string) {
    this.dataService.getVehicleStatus()
      .subscribe((data: VehicleStatus) => this.vehiclestatus = [{ ...data }]);
  }

Чтобы проверить, все ли работает, я жестко запрограммировал номерной знак, чтобы зарегистрировать его в инструментах разработчика Chrome. Это сказало 'Undefined'.

Вот как выглядят данные json: 

[{"status":"P","plate":"test2","code:"MGP150151","message":"fail"}
,{"status":"P","plate":"test3","code":"MGP160298","message":"fail"}
,{"status":"P","plate":"test4","code":"MGP140085","message":"succes"}
,{"status":"O","plate":"test5","code":"MGP150175","message":"succes"}]

Я должен вернуть этот объект: 

{"status":"P","plate":"test3","code":"MGP160298","message":"fail"}

Но это не работает, и сообщение не определено.

Я использовал следующий источник:

https://angular.io/guide/http

Как мне выполнить поиск в массиве и связать его с моей HTML страницей в ionic 3?.

Может кто-нибудь указать мне правильное направление?

С уважением.

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Ответственность за find VehicleStatus из списка должна быть за службу, а не за сам Компонент.

Рассмотрите возможность изменения реализации службы, чтобы взять на себя эту ответственность. Вы можете использовать оператор map, чтобы преобразовать ответ и вернуть найденное VehicleStatus на основе plate, которое будет передано как аргумент при вызове метода getVehicleStatus. 

import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

getVehicleStatus(plate): Observable<VehicleStatus> {
  return this.http.get<VehicleStatus[]>(this.url)
    .pipe(
      map(statuses => statuses.find(status => status.plate === plate))
    );
}

Тогда в вашем home.ts: 

ionViewDidLoad() {
  this.getStatus('test3');
}

getStatus(plate: string) {
  this.dataService.getVehicleStatus(plate)
    .subscribe((data: VehicleStatus) => this.vehiclestatus = data);
}
0 голосов
/ 06 ноября 2018

Вам необходимо array.find , чтобы получить соответствующее значение, которое вернет первый соответствующий элемент из массива 

 this.vehiclestatus =  data.find(vehicle=>vehicle.plate === plate);
...