API Response to Angular2 Model

Question

I am trying to take a JSON response from an API request and populate it into my Styles (class) which is built with custom objects from all of the classes enumerated below. When I make such a request, I receive a JSON object with many (more than 1) Styles Object.

Here are my classes (models, interfaces, I'm not sure) in my 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;

What I'm trying to do is take a json response from:

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

and populate it into an array of Styles.

I believe that I need to create a constructor for my styles class, however I am not quite sure how to construct it with my given API datapoints (the classes match the api response 'verbatim'.)

I'm not sure if I need a constructor for all my classes.

Additionally, I don't know how to "push" the api response into my custom 'Style' model in order to manipulate it's data fields from my component(s).

I would like to separate these classes into different file(s) for all my components to use - however I am not sure where to place them.

Answer 1

I am not sure that I fully understood what you want. But sounds that you want to parse objects that were serialized into JSON?

For the complex data structure you wrote, it looks that you want to use Algebraic Data Types to de-serialize the json.

Maybe it is overkill in your case. Can you show example of data?