代码之家 › 专栏 › 技术社区 › karlo1zg

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

getjson typescript angular json

1

karlo1zg · 技术社区 · 8 年前

我需要从伪JSON服务器提供的JSON文件中获取值。准确地说,我需要一个精确的值,例如,我需要获得所有“type”:“values”,其中group是Air。

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

假服务器的url“ http://localhost:3000/vehicleTypes

    [
      {
        "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"
      }
    ]

我需要提及的是,我所有的文件都设置得很好。我没有发现任何错误,只是没有得到正确的值。。

3 回复 | 直到 8 年前

1

CharanRoot 8 年前

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

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

2

0

Mark Cutajar 8 年前

调整方法的括号。

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

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

将数据映射到模型:

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

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

您需要为车辆类型创建构造函数。

3

0

msanford 8 年前

class 在这种情况下 type interface 由于您的工具中没有(或似乎不需要)任何方法,您只能将其用于类型断言,因此就足够了。

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

并在组件中以以下形式使用:

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

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

(res: Response) http链中的断言。get:无论如何,这就是get要返回的内容,因此类型检查器已经知道要返回什么。由于可以删除该参数,因此可以使链更短,就像使用 .catch .