Отображение ответа API на класс, когда возвращаемый JSON не совсем соответствует классу в сервисе Angular - PullRequest
Новая
       1

Отображение ответа API на класс, когда возвращаемый JSON не совсем соответствует классу в сервисе Angular

0 голосов
/ 28 февраля 2020

Я звоню в API publi c, который возвращает следующую структуру JSON: 

{
    "meta": {
        "xyz": "abc123"
    },
    "events": [
        {
            "event_id": "ggldfgsdl343409534095kgdflkgdslk",
            "event_name": "Event 1",
        },
        {
            "event_id": "214732hdfghdfghj43348fgdfgkjfdkf",
            "event_name": "Event 2",
        },
        {
            "event_id": "35345dsfgdgkjdfgdkjg49343djfgdfk",
            "event_name": "Event 3",
        }
    ]
}

Я создал класс с именем Event: 

export class Event {
    eventId: String;
    eventName: String;
}

Здесь это вызов API в моем EventService: 

  getEvents(): Observable<Event[]> {
    return this.http.get<Event[]>(this.eventApiUrl, this.httpOptions);
  }

Мне известно о нескольких вещах:

  1. Имена свойств моего класса не совпадают с именами свойств в JSON response.
  2. Единственный способ, которым это будет работать, как показано выше, - это если имена свойств совпадают с именами свойств в JSON и API возвращает массив объектов напрямую
  3. Я думаю, что мне нужно использовать pipe (map ()), но не могу заставить его работать

Я хотел бы знать, как я могу перейти на один уровень вниз к массиву "events" и вернуть список объектов в нем как Event [] при учете несоответствия имени свойства.

Ответы [ 3 ]

1 голос
/ 28 февраля 2020 
getEvents(): Observable<Event[]> {
  return this.http.get<Event[]>(this.eventApiUrl, this.httpOptions).pipe(
    map((res: any) => {
      return res.events.map(e => {
        return { eventId: e.event_id, eventName: e.event_name };
      })
    });
  );
}

Вам действительно нужно map. От L oop до events подпишите внутри вашего объекта ответа и создайте новый объект из каждого.

1 голос
/ 28 февраля 2020

Вы можете использовать «pluck», а затем «map», чтобы сначала извлечь «события» из ответа, а затем отобразить их. 

this.http.get<Event[]>(this.eventApiUrl, this.httpOptions)
    .pipe(
        pluck('events'),
        map((events: any[]) => events.map((event: any) => 
            ({eventId: event.event_id, eventName: event.event_name})))
    );
0 голосов
/ 28 февраля 2020 
 getEvents(): Observable<Event[]> {
    return this.http.get<Event[]>(this.eventApiUrl, this.httpOptions)
    .pipe(
      map(ary => ary.map(x => ({
        eventId: x.event_id,
        eventName: x.event_name
      })
    )
  }

Что вам, вероятно, не хватает, и что меня беспокоит, так это то, что в .map () входит ваш массив, возвращаемый из get (), а не каждый отдельный объект, поэтому вам нужно отобразить и этот массив.

...