API對Angular2模型的響應

Question

我正在嘗試從API請求中獲取JSON響應，並將其填充到我的Styles（類）中，該類由下面列舉的所有類的自定義對象構建而成。 當我發出這樣的請求時，我會收到一個包含許多（超過1個）Styles對象的JSON對象。

這是我的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);
       });
   }
 }

並將其填充到樣式數組中。

我相信我需要為我的樣式類創建一個構造函數，但是我不確定如何用給定的API數據點構造它（這些類與api響應'verbatim'相匹配。）

我不確定我是否需要所有類的構造函數。

另外，我不知道如何將api響應“推”到我的自定義“樣式”模型中，以便從我的組件中操縱它的數據字段。

我想將這些類分為不同的文件以供所有組件使用-但是我不確定將它們放置在哪里。

Answer 1

我不確定我是否完全了解您想要什么。 但是聽起來您想解析已序列化為JSON的對象？

對於您編寫的復雜數據結構，您似乎想要使用代數數據類型來反序列化json。

在您的情況下，也許這是矯kill過正。 您可以顯示數據示例嗎？