Angular Typescript обращается к конкретному объекту JSON по идентификатору в наблюдаемой - PullRequest
Новая
       10

Angular Typescript обращается к конкретному объекту JSON по идентификатору в наблюдаемой

0 голосов
/ 11 марта 2019

У меня есть эта строка json ниже, и я хочу либо извлечь массив данных «акции» или массив данных «контакты» на основе того, который мне нужен для данного запроса: 

[{
  "id": "stocks",
  "name": "Stocks",
  "data": [
    {
      "id": 1,
      "name": "Actuant Corporation",
      "symbol": "ATU"
    },
    {
      "id": 2,
      "name": "Xilinx, Inc.",
      "symbol": "XLNX"
    }
  ]
},
{
  "id": "contacts",
  "name": "Contacts",
  "data": [
    {
      "id": 1,
      "full_name": "Betty Traise"
    },
    {
      "id": 2,
      "full_name": "Hank Hurrion"
    },
    {
      "id": 3,
      "full_name": "Calvin Ommanney"
    }
  ]
}]

Напримерв приведенной ниже функции, которая является наблюдаемой, предположим, что аргумент полезной нагрузки - «контакты».В этом случае мне нужно вернуть массив данных «id: contacts». Вот код, который я использую: 

  loadData$(payload: any = {}): Observable<any> {
  // paths: {
  //   titlemaps: 'http://localhost:4100/data'
  // },
  // return this.service.get(this.config.paths.titlemaps, payload);
  const JSON: any  = this.service.get(this.config.paths.titlemaps, payload);
  console.log('payload: ' + payload, 'json: ' + JSON); // if payload is "contacts", return only the contacts
  return JSON.find(data => data.id === 'contacts');
}

Журнал консоли возвращает «contacts» и весь JSON, как и ожидалось., JSON.find завершается ошибкой:

ОШИБКА TypeError: JSON.find не является функцией

Когда я немного переключаю типы функций, я получаю компилятор машинописного текстаошибка:

[ts] Свойство 'find' не существует для типа 'Observable'.

Чего мне не хватает?

Ответы [ 2 ]

1 голос
/ 11 марта 2019

Я переместил операцию сопоставления / поиска в службу, поскольку вы передаете их как параметры, но вам, конечно, не обязательно делать это ...

https://stackblitz.com/edit/angular-2lajx4

Суть ... 

  get(url, payload) {
    return of(results)
    .pipe(map((res: any) => {
      return res.find(data => data.id === payload)
    }));
  }

Простое использование здесь () для имитации наблюдаемого, результаты - это JSON, который вы предоставили выше ...

loadData $ подключается к get и помещает данные в переменную для потребления 

  data: any;

  loadData$(payload: any = {}) {
    this.service.get('../results.json', payload).subscribe(data => {
      this.data = data
      console.log('payload: ' + payload, 'json: ' + this.data); // if payload is "contacts", return only the contacts
    });
  }
1 голос
/ 11 марта 2019

Результат вашего вызова службы выглядит наблюдаемым, вы можете преобразовать результат и вернуть новое значение с помощью конвейерных операторов rxjs: 

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

loadData$(payload: any = {}): Observable<any> {
   return this.service.get(this.config.paths.titlemaps)
     .pipe(
        map(result => result.find(data => data.id === payload))
      );
}

Надеюсь, это поможет!

...