javascript - Angular 8 - HttpClient GET 一个复杂的 JSON 对象

Question

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

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

返回:

{
    "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 中，我有一个服务，我想在其中对将返回上述 JSON 的端点进行 http 调用。

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

如您所见，结果需要放入 Permissions 对象中。

问题

在 TypeScript 中，这个 Permissions 对象应该是什么样的？

export class Permissions {
    ...
}

感谢您的帮助。

Answer 1

您必须根据 typescript 添加响应 json 模式 basic types

01- 简单的方法，如果您使用的是 Visual Studio Code，您可以添加 Paste JSON as Code lib

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

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 值，您必须通过方括号访问它，因为它在 => permission['car manufacturers']

之间有空格

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

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