如何将不同名称的 JSON 对象映射到 TS 模型？答案

【问题标题】：How to map JSON objects with different names to TS model?如何将不同名称的 JSON 对象映射到 TS 模型？
【发布时间】：2019-06-03 06:20:18
【问题描述】：

我正在使用最新版本的 Angular (7.x.x)。我有一个 JSON API，看起来像：

{
  "objectA": {
  "a": {
    "aa": "hello",
    "ab": "xyz"
   },
"b": null,
"c": {
  "ca": null,
  "cb": null,
  "cc": null,
  "cd": "hi",
  "ce": null,
  "cf": null
    }
 },

  "objectB": {
  "a": {
    "aa": "hey",
    "ab": "abc"
   },
  "b": null,
  "c": {
    "ca": null,
    "cb": null,
    "cc": null,
    "cd": null,
    "ce": null,
    "cf": null
  }
}, ...}

我所有的对象都具有相同的结构。现在我想将它们映射到一个打字稿对象。

我的模型看起来像：

 export interface MyObject {
 name: string;
 a: A;
 b?: any;
 c: C;}

 export interface C{
 ca?: any;
 cb?: any;
 cc?: any;
 cd?: any;
 ce?: any;
 cf?: any;}

 export interface A {
 aa: string;
 ab: string;
 ac?: string;}

如何将“objectA”等对象的名称放入接口“Object”的变量“name”中。结果我想返回一个对象数组。

我的服务：

 getResults(): Observable<MyObject[]> {
return this.http.get<MyObject[]>(this.url, {
  headers: this.headers
 })

我的组件：

ngOnInit() {
this.getObjects();}

getObjects(): void {
this.service.getResults()
  .subscribe(data=> {
    this.objects= data;
  });}

谁能帮帮我？提前致谢。

【问题讨论】：

您可以使用startsWith('object') 来识别每个不同的“条目”
请给出想要的结果示例
JSON 响应是一个数组吗？如何为这样的重复对象创建模型？

标签： json angular typescript mapping

【解决方案1】：

getResults(): Observable<MyObject[]> {
    return this.http.get<ApiResponse>[]>(this.url, {
        headers: this.headers
    }).pipe(map((response: ApiResponse) => {
        const myObjs: MyObject[] = [];
        Object.keys(response).forEach((key) => {
            // Now you have the "name" value
            myObjs.push({
                ...response[key],
                name: key
            };
        });
        return myObjs;
    }));
}

Object.keys() 是获取要放入名称中的值的关键。我没有在运行环境中对此进行测试，但它会让您非常接近您的解决方案。您需要一个接口来表示 API 的响应。这就是您真正要求 http.get 提供的内容。然后你将它映射到 MyObject[] 的响应。

【讨论】：