Javascript API对Angular2模型的响应

Javascript API对Angular2模型的响应,javascript,json,angular,Javascript,Json,Angular,我试图从API请求中获取JSON响应,并将其填充到我的样式(类)中,该样式(类)是使用下面列举的所有类中的自定义对象构建的。当我发出这样的请求时,我会收到一个JSON对象,其中包含许多(超过1个)样式的对象 以下是我在search.component.ts中的类(模型、接口,我不确定): class Make { id: number; name: string; niceName: string; } class Model { id: number; name: stri

我试图从API请求中获取JSON响应,并将其填充到我的样式(类)中,该样式(类)是使用下面列举的所有类中的自定义对象构建的。当我发出这样的请求时,我会收到一个JSON对象,其中包含许多(超过1个)样式的对象

以下是我在search.component.ts中的类(模型、接口,我不确定):

class Make {
  id: number;
  name: string;
  niceName: string;
 }

class Model {
 id: number;
 name: string;
 niceName: string;
}

class Year {
  id: number;
  year: number;
}

class Submodel {
  body: string;
  fuel: string;
  modelName: string;
  niceName: string;
}

class Categories {
  EPAClass: string;
  market: string; 
  primaryBodyType: string;
  vehicleSize: string;
  vehicleStyle: string;
  vehicleType: string;
}

class Price {
  baseMSRP: number;
  baseInvoice: number;
  deliveryCharge: number;
  estimateTmv: boolean;
}

class Engine {
  id: number;
  name: string;
  compressionRatio: number;
  cylinder: number;
  size: number;
  displacement: number;
  configuration: string;
  fuelType: string;
  horsepower: number;
  torque: number;
  totalValves: number;
  manufacturerEngineCode: string;
  type: string;
  code: string;
  compressorType: string;
 }

 class Transmission {
  id: number;
  name: string;
  automaticType: string;
  transmissionType: string;
  numberOfSpeeds: number;
 }

 class OptionsDetail {
  id: number;
  description: string;
  name: string;
  equipmentType: string;
  manufactureOptionName: string;
  manufactureOptionCode: string;
  price: Price;
 }

class Options {
  category: string;
  options: OptionsDetail[];
 }

class ColorChips {
  primary: {
    r: number;
    g: number;
    b: number;
    hex: string;
 };
  secondary: { 
    r: number;
    g: number;
    b: number;
    hex: string;
  };
  fabricType: string;
}


class ColorDetails {
  id: number;
  name: string;
  manufactureOptionName: string;
  manufactureOptionCode: string;
  category: string;
  colorChips: ColorChips;
}
class Color {
  category: string;
  options: ColorDetails[];
}

class MPG {
  city: number;
  highway: number;
}

class Style {
  id: number;
  name: string;
  make: Make;
  model: Model;
  year: Year;
  submodel: Submodel;
  trim: string;
  states: string[];
  engine: Engine;
  transmission: Transmission;
  options: Options[];
  colors: Color[];
  drivenWheels: string;
  numOfDoors: string;
  squishVins: string[];
  categories: Categories;
  MPG: MPG;
  manufacturerOptionCode: string;
我试图做的是从以下位置获取json响应:

export class EdmundsAPIComponent {
 data: Object;
 loading: boolean;
 constructor(private http: Http) {
 }

 makeRequest(): void {
   this.loading = true;
  this.http.request('https://api.edmunds.com/api/vehicle/v2/styles/101418796?view=full&fmt=json&api_key=REDACTED')
       .subscribe((res: Response) => {
        this.data = res.json();
        this.loading = false;
        console.log(this.data);
       });
   }
 }
并将其填充到样式数组中

我相信我需要为styles类创建一个构造函数,但是我不太确定如何使用给定的API数据点来构造它(这些类与API响应“逐字”匹配)

我不确定我是否需要所有类的构造函数

此外,我不知道如何将api响应“推”到我的自定义“样式”模型中,以便从我的组件中操作它的数据字段


我想将这些类划分为不同的文件,供我的所有组件使用-但我不确定将它们放置在何处。

我不确定我是否完全理解您的要求。但听起来您想解析序列化为JSON的对象

对于您编写的复杂数据结构,您似乎希望使用代数数据类型来反序列化json


也许这对你来说太过分了。您可以展示数据示例吗?

基本上,我想将API响应解析到我的模型中(可能使用服务?)