Angular2 mapping of nested JSON arrays to model

Question

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

{
"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"
                }
            ]
        }
    ]
}
}

Models:

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-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 || {};
}

How did you generate the C# models? Looks wrong to me.. copy paste your json here and compare with yours: json2csharp.com — Rosdi Kasim
– Rosdi Kasim, Commented Apr 5, 2017 at 10:34
My mistake, but still looks wrong to me, see here: json2ts.com What error did you get? — Rosdi Kasim
– Rosdi Kasim, Commented Apr 5, 2017 at 10:40
The difference is just, that I use classes instead of interfaces — bobafett1
– bobafett1, Commented Apr 5, 2017 at 10:45

Ján Halaša · Accepted Answer · 2017-04-05 11:00:59Z

1

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.

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().

answered Apr 5, 2017 at 11:00

Ján Halaša

8,4961 gold badge40 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular2 mapping of nested JSON arrays to model

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related