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

Question

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

我使用Angular2以打字稿和这里是代码的一部分，在那里我做的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该服务器（URL）的代码：

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

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

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

Answer 2

你不会在这种情况下，需要一个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); 
} 

和消费它在你的组件为：

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

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

请注意，您不需要在链(res: Response)断言从http。得到：这就是得到输入无论如何返回，所以类型检查器已经知道什么期望。由于您可以删除参数，因此可以使链条更短，就像您使用.catch时所做的那样。

Answer 3

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