Creating a class in Angular from JSON Response Object

Question

I would like to create a model/class for my Angular App from the following response template:

{
 "id": {integer},
 "name": {string},
 "make": {
       "id": {integer},
       "name": {string},
       "niceName": {string}
 },
 "model": {
   "id": {string},
   "name": {string},
   "niceName": {string}
 },
 "year": {
   "id": {integer},
   "year": {integer}
 },
 "submodel": {
   "body": {string},
   "fuel": {string}, // is not always populated
   "tuner": {string}, // is not always populated
   "modelName": {string},
   "niceName": {string}
 },
 "trim": {string},
 "states": {array},
 "engine": {object},
 "transmission": {object},
 "options": [
   {
     "category": {string},
     "options": {array}
   }
 ],
 "colors": [
   {
  "category": {string},
  "options": {array}
  }
  ],
 "drivenWheels": {string},
 "numOfDoors": {string},
 "squishVins": {array},
 "categories": {object},
 "MPG": {object},
 "manufacturerCode": {string},
 "price": {object}
 }

into something like this:

class SearchResult {
 id: number;
 name: string;
 make: {
  id: number;
  name: string;
  niceName: string;
 };
 model: {
  id: number;
  name: string;
  niceName: string;
 };
 year: {
  id: number;
  year: number;
 }; 

Some caveats:

1. Most of these fields have multiple "objects/data" for "colors" (Interior and Exterior) and Options (5 different categories) - how do I build an 'abstract' loop that can handle a variable amount of colors, and others, etc.

2. Some fields return an object - how do I handle that?

3. Take "model" for example - it's an object with 3 fields, 'make' and 'submodel' are similar. How would I set this up?

Answer 1

You can make those objects into models!

So the example you gave would look like:

import {Make, Model, Year} from "../my_models";

class SearchResult {
 id: number;
 name: string;
 make: Make;
 model: Model;
 year: Year; 

For arrays of primatives or objects the syntax would be:

import {Color} from "../my_models";   

class SearchResult{
    ...
    colors: Color[];
    options: string[];
    ...
}