嵌套JSON数组的Angular2映射到模型 [英] Angular2 mapping of nested JSON arrays to model

问题描述

我正在尝试将收到的JSON数据映射到我创建的模型上。问题是，JSON数据有嵌套数组。所以不可能按照我想要的方式映射我的数据。我的方式是否存在错误或是否有更好的方法来映射我的JSON数据？

I am trying to map the received JSON-data on my created Models. The problem is, that the JSON-data has nested arrays. So it is not possible to map my data with the way I am trying to. Is there a mistake in my way or is there a better way to map my JSON-data ?

JSON-Data

JSON-Data

{
"data": {
    "apiName": "test-application",
    "stages": [
        {
            "stage": "prod",
            "id": "xxxxxxxx",
            "methods": [
                {
                    "id": "xxxxxx",
                    "path": "/users/create",
                    "httpMethods": [
                        "GET"
                    ],
                    "methodName": "testMethod",
                    "url": "https://xxxx/xxxxx/xxxxxx"
                }
            ]
        },
        {
            "stage": "dev",
            "id": "xxxxxxx",
            "methods": [
                {
                    "id": "xxxxxxx",
                    "path": "/users/create",
                    "httpMethods": [
                        "GET"
                    ],
                    "methodName": "testMethod",
                    "url": "https://xxxxx/xxxxxx/xxxx"
                }
            ]
        }
    ]
}
}

模型：

import {ApiStage} from "./ApiStage";
export class Api {
  constructor(values: Object = {}){
    Object.assign(this, values);
  }
  public apiName: string;
  public stages: ApiStage[];
}

import {ApiMethod} from "./ApiMethod";
export class ApiStage {
  constructor(values: Object = {}){
    Object.assign(this, values);
  }
  public stage: string;
  public id: string;
  public methods: ApiMethod[];
}

export class ApiMethod {
  constructor(values: Object = {}){
    Object.assign(this, values);
  }
  public id: string;
  public path: string;
  public httpMethods: string[];
  public methodName: string;
  public url: string;
}

服务中的HTTP方法：

HTTP-method in service:

getApi() {
return this.http.post(this.url, this.data, {headers: this.headers})
  .map(this.extractData)
  .map(api => new Api(api))
  .catch((error: any) => Observable.of(error.json().error || 'Server error'));
}

private extractData(res: Response) {
  let body = res.json();
  return body.data || {};
}

推荐答案

JSON只是非常有限数据类型集 - 字符串，数字，布尔值，数组，对象。如果要将JSON对象树转换为自定义类的对象树，则必须以递归方式执行此操作并创建正确的对象 - 而不是使用看起来像是类的对象。

JSON has just a very limited set of data types - string, number, boolean, array, object. If you want to convert a JSON object tree to a tree of objects of your custom classes, it's necessary to do it recursively and with creating correct objects - not working with objects that just look like being of your classes.

这个过程可能很乏味且容易出错，因此最好使用类变换器等库（ https://github.com/pleerock/class-transformer ）可以为你做。您只需使用装饰器（例如@Type（...））注释您的类，然后您可以使用plainToClass（）方法转换普通JSON对象，或使用classToPlain（）将实际对象序列化为JSON。

This process can be tedious and error prone, so it's better to use a library such as Class transformer (https://github.com/pleerock/class-transformer) which can do it for you. You just annotate your classes with decorators (such as @Type(...)) and then you can transform plain JSON objects using plainToClass() method or serialize real objects to JSON using classToPlain().

这篇关于嵌套JSON数组的Angular2映射到模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！