Angular Http JSON 响应映射答案

【问题标题】：Angular Http JSON response MappingAngular Http JSON 响应映射
【发布时间】：2020-02-05 05:58:04
【问题描述】：

我正在尝试将 Http JSON 响应映射到 Angular / typescript 中的自定义接口。我已经尝试了几种方法，但还没有成功。 JSON 对象未正确映射到接口。地图属性保持“未定义”。如果我直接打印数据，则正确输出 JSON 数据 - 问题是我不知道如何访问它。这是我的代码：

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

JSON 答案如下所示。它是 Map> 在 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 });
}

在配置服务中我订阅了方法。如何正确映射 Response 以便 data 中的属性映射不是未定义的并且可以正确访问？

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 内容导入导出界面？地图属性应填充相关的值。我很感激任何帮助！ :)

【问题讨论】：

标签： json angular dictionary mapping

【解决方案1】：

如果我理解正确，您期望通过将 <IMap<any>> 添加到 get 调用中，它将返回映射到 IMap 的响应。没有，请检查this 问题。

您可以做的是使用 rxjs map 自己映射响应，如下所示：

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

【讨论】：

感谢您的快速回复。这正是我的意思！现在我明白为什么它不起作用了。我希望 get 方法进行映射...我的错。

【解决方案2】：

我意识到我实际上不需要导出接口并将代码更改为以下。我花了一段时间才知道 x.y 在 ts 中与 x["y"] 相同。通过 response[parameter] 我可以动态访问响应对象的属性——这正是我所需要的。

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 的帮助和链接！

【讨论】：