Javascript Angular 8-HttpClient获取复杂的JSON对象

我使用Angular 8，并查询端点以获取权限对象。当我通过Postman调用它时，我得到以下返回的JSON：

获取

https://endpoint/@{xxx}/权限

返回：

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

在Angular 8中，我有一个服务，我想对端点进行http调用，该端点将返回上述JSON

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

---

非常感谢您的帮助。

您必须按照typescript添加响应json模式

01-简单的方法是，如果使用Visual Studio代码，可以添加

02-或者您可以复制粘贴所有json并删除引号并将值更改为类型，请检查简单模式，您可以将对象更改为类，并将其引用添加到Permissions类中

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

要访问

汽车制造商

值，您必须通过方括号访问该值，因为它在=>

权限['car manufacturers']之间有空格。

对于children对象，如果您还不知道它的模式，您可以通过下面的代码定义我有任何键和任何值

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

---

面向对象模式

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

---

哇，那个VSCode扩展！

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