How do I map a JSON object with nested arrays into a typescript model?

Question

Suppose I had an api that returns the following JSON structure:

{
  "Response": {
    "status": {
      "code": "SUCCESS",
      "message": "owner found",
      "count": "1"
    },
    "owners": [
      {
        "ownerId": "12345",
        "name": "Example Person",
        "cars": [
          {
            "make": "Toyota"
            "year": "2004"
            "model": "Camry"
          } 
        ]
      }
    ] 
  }
}

I want to map this json structure into these typescript models:

export class ApiResponse{
  constructor(
    public status: Status,
    public owners: Owner[]
  ) {}
}
export class Status {
  constructor(
    public code: string,
    public message: string,
    public count: number
  ) {}
}
export class Owner{
  constructor(
  public ownerId: number,
  public name: string,
  public cars: Car[]
  ) {}
}
export class Car{
  constructor(
    public make: string;
    public year: string;
    public model: string;
  )
}

From my understanding of angular 7, you can use pipe and map from rxjs to achieve this:

this.http.get(url).pipe(
      map((data: any[]) => data.map((item: any) => new ApiResponse(
      new Status(
        item.status.code,
        item.status.message,
        item.status.count),
...

Using this I am able to map a JSON object, but I am unsure how to approach mapping arrays and nested arrays.

How should I approach mapping a JSON with nested arrays?

If your model definitions are really nothing but property lists, they are functionally equivalent to interfaces. As such, there's no need to instantiate new objects, because nothing is gained -- TS enforces type checking for interfaces as well as classes. Just return the Observable to the component for rendering. — The Head Rush
– The Head Rush, Commented Apr 17, 2019 at 20:05

Andrew Radulescu · Accepted Answer · 2019-04-17 20:37:13Z

2

If your classes will not implement any new functionality you should use interfaces just to enforce strong types, otherwise is just boilerplate. As you started you can derive your 4 interfaces like so and benefit from the Typescript safety check:

export interface ApiResponse{
    status: Status,
    owners: Owner[]
}
export interface Status {
    code: string,
    message: string,
    count: number
}
export interface Owner{
    ownerId: number,
    name: string,
    cars: Car[]
}
export interface Car{
    make: string;
    year: string;
    model: string;
}

Your method that calls that API can be written like this:

getStatusAndOwners(url): Observable<ApiResponse> {
    return this.http.get(url);
}

When you will consume the data (in the subscribe block most probably) you will benefit from "IntelliSense" and strong typing.

Good luck!

answered Apr 17, 2019 at 20:37

Andrew Radulescu

1,89915 silver badges23 bronze badges

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

2 Comments

wsattanuparp Over a year ago

Thanks for the response, this works as needed. Something to note is that I needed to cast the get function to fit the return value: this.http.get<ApiResponse>(url);

Andrew Radulescu Over a year ago

True, because we expect an Observable<ApiResponse>. Well done!

Collectives™ on Stack Overflow

How do I map a JSON object with nested arrays into a typescript model?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related