Question

我正在使用最新版本的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;
  });}

有人可以帮助我吗？预先感谢。

Answer 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 []的响应。

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

1 个答案: