Угловое отображение ответа HSON HTTP

Question

Я пытаюсь сопоставить Http JSON Response с пользовательским интерфейсом в Angular / typcript. Я пробовал это несколькими способами, но еще не сделал это. Объект JSON неправильно сопоставлен с интерфейсом. Атрибут карты остается "неопределенным". Если я печатаю данные напрямую, данные JSON выводятся правильно - проблема в том, что я не знаю, как получить к ним доступ. Вот мой код:

export interface IMap<T> {
map: Map<string, Array<T>>;
}

Ответ в формате JSON выглядит следующим образом. Это Карта <Строка, Список <? >> в Java.

{
    "somenumbers": [
        20,
        40
    ],
    "somemorenumbers": [
        71,
        111
    ]
}

Теперь я попытался отобразить это следующим образом:

public getValues(
    paramList: Array<string>
): Observable<IMap<any>> {
    const url = `url`;
    let params = new HttpParams();
    for (let s of paramList) {
        params = params.append("params", s);
    }

    return this.http.get<IMap<any>>(url, { params });
}

В configservice я подписываюсь на Метод. Как правильно отобразить Ответ, чтобы карта атрибутов в данных не была неопределенной и к ней можно было правильно обращаться?

this.configService
        .getValues(["somenumbers", "somemorenumbers"])
        .subscribe((data: IMap<any>) => {
            //outputs the JSON Data as Object{somenumbers: Array(2), somemorenumbers: Array(2), map: Map(0)}
            console.error(data); 
            console.error(data.map);//map is undefined => ERROR
        });

Как видите, атрибут карты не определен. Это просто «карта: карта (0)». Теперь ... - Как я могу получить материал JSON в интерфейс экспорта? Атрибут карты должен быть заполнен соответствующими значениями. Я ценю любую помощь! :)

Answer 1

Я понял, что мне на самом деле не нужен интерфейс экспорта, и изменил код на следующий. Мне потребовалось некоторое время, чтобы понять, что xy совпадает с x ["y"]. Через ответ [параметр] я могу динамически получать доступ к атрибутам объекта ответа - именно то, что мне нужно.

public getValues(
    paramList: Array<string>
): Observable<Map<string, Array<any>>> {
    const url = `url`;
    let params = new HttpParams();
    for (let s of paramList) {
        params = params.append("params", s);
    }

    return this.http
        .get<any>(url, {
            params
        })
        .pipe(
            map(response => {
                let toReturn = new Map<string, any[]>();
                for (let parameter of paramList) {
                    toReturn.set(parameter, response[parameter]);
                }
                return toReturn;
            })
        );
}

Отображение работает сейчас! Ответ JSON остается таким же, как и в вопросе выше.

this.configService
        .getValues(["somenumbers", "somemorenumbers"])
        .subscribe((data: Map<string, any[]>) => {

            console.error(data);
        });

Спасибо за помощь и ссылки @M Mansour!

Answer 2

Если я правильно понял, вы ожидаете, что, добавив <IMap<any>> к вызову get, он вернет вам ответ, сопоставленный с IMap. Это не так, отметьте эту проблему.

Вместо этого вы можете использовать rxjs map , чтобы самостоятельно отобразить ответ так:

return this.http.get<IMap<any>>(url, { params }).pipe(
  map((response) => {
    // map the response here
  })
);