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:

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.
Some fields return an object - how do I handle that?
Take "model" for example - it's an object with 3 fields, 'make' and 'submodel' are similar. How would I set this up?

chrispy · Accepted Answer · 2017-02-06 18:35:20Z

2

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[];
    ...
}

answered Feb 6, 2017 at 18:35

chrispy

3,6321 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Moshe Over a year ago

yes! thats exactly what I should do! now, how do I format my models? This makes sense to me on a theoretical level, but how would my models look like? Where do I put it in the file structure (according to convention) can you elaborate your code for me to apply it to my project? Thanks a lot

chrispy Over a year ago

You'll define the models the same way as your SearchResult class, until you have only primatives left :)

Moshe Over a year ago

I see what you're saying, now I'm going to create a models file, but where? and does each model have to be separated in a different file (i prefer this)? How do I go about having many color objects in my main "SearchResult" ?

chrispy Over a year ago

You can put them in separate files and export them individually, or you can "barrel" them by re-exporting all of them from one file (similar to my example above)

chrispy Over a year ago

For the many colors, note the Color[] in my second example -- this will give you an array of color objects.

|

Collectives™ on Stack Overflow

Creating a class in Angular from JSON Response Object

1 Answer 1

8 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Related