时间戳

首页 > 解决方案 > Angular 8 - HttpClient 获取一个复杂的 JSON 对象

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

问题描述

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

得到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 {
    ...
}

我感谢您的帮助。

标签： javascriptjsonangularhttpget

解决方案

您必须根据打字稿基本类型添加响应 json 架构

01-简单的方法，如果你使用 Visual Studio Code，你可以添加Paste JSON 作为代码库

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 对象，如果您还不知道它的架构，您可以通过以下代码定义我有任何键和任何值

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

推荐阅读