Question

我需要从伪json-server提供的JSON文件中获取值。确切地说，我需要一个确切的值，例如我需要获得所有“类型”：“值”，其中组是Air。

我正在使用Angular2和TypeScript，这是我在TransformerService文件中执行get请求的代码的一部分：

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

导出类：

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”的网址，这是该服务器上的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

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

首先，你需要过滤你的json结果才能获得Air组。

您可以应用可观察的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响应不同，因此如何将您的json数组角度转换为VehicleTypes数组。您需要更改VehicleTypes类或您的后端代码发送匹配变量名称。

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

Answer 2

调整方法的括号。

自：

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

你需要为VehicleTypes创建一个构造函数。

Answer 3

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

发出的JavaScript中存在一个类会产生不必要的开销，而接口提供类型安全而不向JavaScript发出类：它仅由tsc中的类型检查器使用然后丢弃。

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

声明服务返回的类型：

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

并在您的Component中使用它：

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

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

请注意，您不需要来自http.get的链中的(res: Response)断言：无论如何都要输入get，因此类型检查器已经知道会发生什么。由于您可以删除参数，因此可以使链更短，就像使用.catch一样。

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

3 个答案: