Angular: converting a json get response to class w

Question

So basically I have an Angular component that has a variable of type DashboardConfiguration that is being set to an Observable. This observable comes from a resolver that calls a service that makes a get request for the json object.

The problem is that the observable is feeding the variable a plain Object, and not a DashboardConfiguration object. This is preventing me from calling a function of DashboardConfiguration.

I have structured this to be very similar to this example which has all their code at the bottom of the article

The DashboardConfiguration class I need the json to be cast to

export class DashboardConfiguration {
  id:string;
  createdDate?:any;
  properties?:any;
  widgets:WidgetConfiguration[];

  //This is the function that is not being called
  public getWidgetByAlias(alias:string):WidgetConfiguration {
    this.widgets.forEach(function (widget) {

      if(widget.hasAlias(alias)){
        console.log("returining widget "+widget.id);
        return widget;
      }
    });
    return null;
  }
}

The http-get response:

  "dashboard": {
      "id":"029c2322-8345-4eed-ac9e-8505042967ec",
      "createdDate": "",
      "properties": {
        //omitted form stackoverflow post},
      },
      "widgets":[
        {
          "id": "705c0853-e820-4c26-bc4c-e32bd7cb054c",
          "createdDate": "",
          "properties": {
            "aliases":[
              "test"
            ]
          }
        },
        {
          "id": "b5e161dd-e85e-44d4-9188-5f4d772d9b40",
          "createdDate": "",
          "properties": {
            "aliases":[
              "test1"
            ]
          }
        }
      ]
  }

The Angular component:

export class DashboardComponent implements OnInit {

  configuration:DashboardConfiguration;

  constructor(private route:ActivatedRoute) { }

  ngOnInit() {
    this.configuration = this.route.snapshot.data['dashboard'];
    console.log(this.configuration.id);
  }

  //This is the function calling the function thats not working!
  getWidgetByAlias(alias:string):WidgetConfiguration {
    return this.configuration.getWidgetByAlias(alias);
  }

}

The service that makes the http request:

  constructor(private http:HttpClient) {}

  getConfiguration(uuid:string):Observable<DashboardConfiguration> {
    return this.http.get<DashboardConfiguration>('/api/dashboard',{params: {id: uuid}});
  }

The resolver:

  constructor(private dashboardService:DashboardService){}

  resolve(route: ActivatedRouteSnapshot): Observable<DashboardConfiguration> {
    return this.dashboardService.getConfiguration(route.queryParams['id']); //this calls the service above
  }

Answer 1

You can combine json data with new created object , I use this when I want to use any kind of functionality with api response data.

by using map operator

this.http.get<DashboardConfiguration>('/api/dashboard',{params: {id: uuid}})
  .map(result => Object.assign(new DashboardConfiguration(),result));

Object.assign()

Answer 2

The short answer is that the HttpClient service will not do this for you. As you said, it returns a JavaScript object in the form of your class properties ... not an actual instance of that class.

You'll need to add your own code to create the objects of the correct type.

There is an example here: Angular2. Map http response to concrete object instance