Angular 6 HttpClient JSON-ответ на myObject

Question

У меня есть API, который возвращает массив объектов при запросе с помощью GET.Ответ от API имеет вид:

[
    {
        "Ident": "Ag",
        "Description": "Argent"
    },
    {
        "Ident": "As",
        "Description": "Arsenic"
    }
]

В моем приложении у меня есть объект Элемент со следующей структурой:

export class Element {
    public ident: string;
    public description: string;

    constructor(ident: string, description: string) {
        this.ident = ident;
        this.description = description;
    }
}

Мое приложениетакже имеется служба с именем mrcService с функцией с именем getElements () , которая отправляет запрос GET с помощью HttpClient и возвращает наблюдаемый массив объектов Элемент :

getElements(): Observable<Element[]> {
  return this.http.get<Element[]>(this.apiUrl)
    .pipe(
      catchError(this.handleError('getElements', []))
    );
}

Наконец, у меня есть компонент, который подписывается на этот сервис в ngOnInit () {} , он берет каждый элемент массива, возвращенный API, и помещает их в массив:

elements: Array<Element> = [];
ngOnInit() {
    this.mrcService.getElements()
      .subscribe(res => {
        res.forEach(item => {
          this.elements.push(new Element(item.Ident, item.Description));
        });
        console.log(this.elements[0]); // returns the object at the index
      });
    console.log(this.elements[0]); // returns undefined
  }

Теперь я сталкиваюсь с двумя проблемами:

• При отправке в мой массив на наблюдаемые свойства необходимо ссылаться в соответствии с номенклатурой ответа API.Я хотел бы использовать ident и * description * без заглавных букв, как в моем определении объекта, вместо заглавной буквы из ответа API.

• Я не могуиспользуйте this.elements [i] за пределами .subscribe .Когда я делаю console.log (this.elements [i] , он говорит, что неопределен, но когда я делаю console.log (this.elements) , я вижу структуру массива.

Answer 1

При отправке в мой массив на наблюдаемые свойства необходимо ссылаться в соответствии с номенклатурой ответа API.Я хотел бы использовать идентификатор и * описание * без заглавных букв, как в моем определении объекта, вместо заглавной буквы из ответа API

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

Я не могу использовать this.elements [i] за пределами.подписываться.Когда я делаю console.log (this.elements [i], он говорит неопределенный, но когда я делаю console.log (this.elements), я вижу структуру массива.

Помните, что наблюдаемыеявляются асинхронными, поэтому во время выполнения console.log вне подписки ваш http-запрос еще не завершен.