Angular 8 - HttpClient GET a complex JSON object

Question

I am using Angular 8, and am querying an endpoint to get a permissions object. When I call it via Postman, I get the following returned JSON:

GET https://endpoint/@{xxx}/permissions

Returns:

{
    "continents": {
        "order": 2,
        "actions": {
            "show": true
        },
        "children": {}
    },
    "car manufacturers": {
        "order": 3,
        "actions": {
            "show": true
        },
        "children": {}
    },
    "products": {
        "order": 1,
        "actions": {
            "show": true,
            "getItems": {
                "type": "GET",
                "URL": "https://endpoint/@{xxx}/products"
            },
            "updateItem": {
                "type": "PUT",
                "URL": "https://endpoint/@{xxx}/products/{id}"
            },
            "addItem": {
                "type": "POST",
                "URL": "https://endpoint/@{xxx}/products"
            }
        },
        "slug": "/products/",
        "children": {}
    }
}

In Angular 8, I then have a service, where I want to make an http call to to the endpoint that will return the above JSON.

  // GET
  GetIssues(): Observable<Permissions> {
    return this.http.get<Permissions>(this.baseurl + '/permissions/')
    .pipe(
      retry(1),
      catchError(this.errorHandl)
    )
  }

As you can see the result needs to be put into the Permissions object.

Question

In TypeScript, what should this Permissions object look like?

export class Permissions {
    ...
}

I appreciate your help.

Answer 1

You have to add response json schema , as per typescript basic types

01- the simple way, If you are using Visual Studio Code you can add Paste JSON as Code lib

02- Or You can copy paste all json and remove quotes and change values to be the type, please check the simple schema, you can change objects to be classes and add it's reference in the Permissions class

export class Permissions {

continents: {
    order: number;
    actions: {
      show: true;
    };
    children: {};
  };

  'car manufacturers': {
    order: number;
    actions: {
      show: boolean;
    };
    children: {};
  };
  products: {
    order: number,
    actions: {
        show: boolean,
        getItems: {
            type: string,
            URL: string
        },
        updateItem: {
            type: string,
            URL: string
        },
        addItem: {
            type: string,
            URL: string
        }
    },
    slug: string ,
    children: {}
};
}

to access car manufacturers value you have to access this by square brackets because it has space between => permission['car manufacturers']

for the children object if you don't know it's schema yet, you can define that I have any key and any value by the below code

children: {
      [key: string]: any
    };

---

Object oriented schema

class Permissions {
  continents:          CarManufacturers;
  "car manufacturers": CarManufacturers;
  products:            Products;

  }

class CarManufacturers {
    order:    number;
    actions:  CarManufacturersActions;
    children: Children;
}

class CarManufacturersActions {
    show: boolean;
}

class Children {
}

class Products {
    order:    number;
    actions:  ProductsActions;
    slug:     string;
    children: Children;
}

class ProductsActions {
    show:       boolean;
    getItems:   AddItem;
    updateItem: AddItem;
    addItem:    AddItem;
}

class AddItem {
    type: string;
    URL:  string;
}