лучший способ хранить и обрабатывать JSON данных из httpClient получить запрос в Angular - PullRequest
Новая
       10

лучший способ хранить и обрабатывать JSON данных из httpClient получить запрос в Angular

0 голосов
/ 10 апреля 2020

Я новичок в Angular, и я работаю над проектом с Ioni c Angular. Моя цель - использовать httpClient и отправить запрос на получение в API страны, который вернет мне JSON из всех стран. Для хранения данных я использовал способ создания интерфейса, соответствующего типу данных, от которого я получаю данные, а затем подписался на это наблюдаемое и сохранил данные в массиве определенного мной типа данных.

Но для стран единственное, что мне нужно, это имя, можно ли сохранить имя каждой страны в массиве без определения структуры принимающего объекта JSON, потому что он очень длинный и сложный.

Это код, который я пытаюсь сделать:

Получение стран как наблюдаемых. в файле Country.Service 

  getCountry(): Observable<any>{
    return this.http.get<any>(this.url2);
  }

Объявление переменной и сохранение данных стран: 

public countries: any;

  storeCountry(){
    this.countryService.getCountry().subscribe(
      data => {
        this.countries = data;
      }
    );

Это то, что я пытаюсь сделать, но мне не удалось получить данные в переменную стран для доступа к ним в виде массива, когда я консоль регистрирую страны, которые они отображают как неопределенные.

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

1 Ответ

0 голосов
/ 10 апреля 2020

Я предполагаю, что данные, которые вы получаете от бэкэнда, имеют структуру 

countries = [
  { 'name': 'USA', 'id': '1', ... },
  { 'name': 'UK', 'id': '2', ... },
  ...
]

В этом случае вы можете удалить <any> из запроса GET и использовать map() метод, чтобы получить только названия стран в виде массива. Попробуйте следующее

Служба 

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

getCountry(): Observable<any>{
  return this.http.get(this.url2).pipe(map(countries => countries.map(country => country.name);
}

Пояснение

Если вы новичок в Rx js, то вы можете быть сбиты с толку почему есть две map функции.

  1. pipe(map()) часть принадлежит Rx js.

    • pipe() Функция может быть использована для изменения и управления потоком данных с использованием различных Rx js операторов .
    • Мы используем только один оператор map(), который проецирует пользовательскую функцию на исходную наблюдаемую (JSON, возвращенную из API) и возвращает полученное значение в качестве наблюдаемой.

  2. Мы используем функцию map() в countries.map() для обеспечения нашей пользовательской функции проецирования. Он создает новый массив на основе нашего обратного вызова для использования только свойства name массива исходного объекта.

Затем вы можете подписаться на него в компоненте 

storeCountry(){
  this.countryService.getCountry().subscribe(
    countries => {
      this.countries = countries; // this.countries = ['USA', 'UK', ...]
    },
    error => {
      // handle error
    }
  );
}
...