如何从 Angular2 应用程序获取 json 值

Question

我需要从 JSON 文件中获取值，该文件由 fake-json-server 提供。准确地说，我需要一个确切的值，例如我需要得到所有 "type": "values" 组是 Air.

我将 Angular2 与 TypeScript 一起使用，这是我在 TransformerService 文件中执行获取请求的代码的一部分：

getVehicleGroups(groupName: string) {
    return this.http.get(`${this.apiUrl}/vehicleTypes?group=${groupName}`)
    .map((res: Response) => res.json() as VehicleTypes[]).catch(this.handleError);
}

已导出 class:

export class VehicleTypes {
     // vehicleGroup: string;
     vehicleType: string;
     vehicleModel: string;
}

我在单独的文件中调用该方法：

getVehicleGroups() {
    return this.transformersService.getVehicleGroups(this.vehicleGroup)
    .subscribe((vehicleTypes => this.vehicleTypes = vehicleTypes));
}

假服务器“http://localhost:3000/vehicleTypes”的url，这是来自该服务器（url）上db.json的代码：

    [
      {
        "group": "Air",
        "type": "Plane",
        "model": "F-22"
      },
      {
        "group": "Air",
        "type": "Plane",
        "model": "Sukhoi"
      },
      {
        "group": "Air",
        "type": "Plane",
        "model": "MiG"
      },
      {
        "group": "Air",
        "type": "Helicopter",
        "model": "Apache"
      },
      {
        "group": "Air",
        "type": "Helicopter",
        "model": "Kamov"
      }
      {
        "group": "Sea",
        "type": "Boat",
        "model": "Sailboat"
      },
      {
        "group": "Sea",
        "type": "Boat",
        "model": "Jetboat"
      },
      {
        "group": "Sea",
        "type": "Submarine",
        "model": "Standard"
      },
      {
        "group": "Land",
        "type": "Car",
        "model": "Camaro"
      },
      {
        "group": "Land",
        "type": "Car",
        "model": "AMG GT R"
      },
      {
        "group": "Land",
        "type": "Car",
        "model": "Lamborghini"
      },
      {
        "group": "Land",
        "type": "Truck",
        "model": "Unimog"
      },
      {
        "group": "Land",
        "type": "Truck",
        "model": "Western Star 5700"
      }
    ]

我需要说明一下，我所有的文件都设置好了。我没有收到任何错误，我只是没有得到正确的值..

Answer 1

调整方法的括号。

发件人：

getVehicleGroups() {
    return this.transformersService.getVehicleGroups(this.vehicleGroup)
    .subscribe((vehicleTypes => this.vehicleTypes = vehicleTypes));
}

收件人：

getVehicleGroups() {
    return this.transformersService.getVehicleGroups(this.vehicleGroup)
    .subscribe((vehicleTypes) => this.vehicleTypes = vehicleTypes);
}

将数据映射到您的模型：

选项 1：更改模型以匹配 json 数据。

export class VehicleTypes {
     type: string;
     model: string;
}

选项 2：在转换为 json 后立即更改服务级别的 json 属性。

getVehicleGroups(groupName: string) {
    return this.http.get(`${this.apiUrl}/vehicleTypes?group=${groupName}`)
    .map((res: Response) => res.json().map(res => new VehicleTypes(res.type, res.model)).catch(this.handleError);
}

并且您需要为 VehicleType 创建一个构造函数。

Answer 2

在这种情况下，您不需要 class，type interface 就足够了，因为您的车辆中没有（或似乎不需要）任何方法，您只是在使用它用于类型断言。

A class 存在于发出的 JavaScript 中，会产生不必要的开销，而接口提供类型安全性而不向 JavaScript 发出 classes：它仅由tsc 中的类型检查器，然后被丢弃。

export interface VehicleTypes {
     // vehicleGroup: string;
     vehicleType: string;
     vehicleModel: string;
}

声明您的服务类型 returns:

getVehicleGroups(groupName: string): Observable<VehicleTypes[]> {
    return this.http.get(`${this.apiUrl}/vehicleTypes?group=${groupName}`)
      .map(res.json)
      .catch(this.handleError);
}

并在您的组件中使用它作为：

// Assert the type vehicleTypes expects
vehicleTypes: <VehicleTypes>[];

getVehicleGroups() {
    return this.transformersService.getVehicleGroups(this.vehicleGroup)
    .subscribe(vehicleTypes => this.vehicleTypes = vehicleTypes);
}

请注意，您不需要来自 http.get 的链中的 (res: Response) 断言：无论如何，这就是 get 被输入到 return 的内容，因此类型检查器已经知道要输入什么预计。由于您可以删除参数，因此可以使链更短，就像您对 .catch.

所做的那样

Answer 3

I need to get all "type": "values" where group is Air

首先，您需要过滤 json 结果以仅获得 Air 组。

您可以应用 observable filter

getVehicleGroups(groupName: string) {
    return this.http.get(`${this.apiUrl}/vehicleTypes?group=${groupName}`)
    .filter(data => data.group === "Air")
    .map((res: Response) => res.json() as VehicleTypes[]).catch(this.handleError);
}

其次，您的 VehicleTypes 模型变量名称与 json 响应不同，因此 angular 如何将您的 json 数组转换为 VehicleTypes 数组。您需要更改 VehicleTypes class 或您的后端代码发送匹配变量名称。

export interface VehicleTypes {
        type: string;
     model: string;
}

如何从 Angular2 应用程序获取 json 值

How to get json value from Angular2 app

json

getjson

typescript

angular