1

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
  }
wesmartin17
  • 55
  • 9

2 Answers2

2

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()

Muhammed Albarmavi
  • 23,240
  • 8
  • 66
  • 91
  • Thanks, worked. I have a similar problem with the WidgetConfiguration[] inside DashboardConfiguration, since WidgetConfiguration also has a function inside it. Typing Object.assign(new WidgetConfiguration()[],result.widgets) doesn't work because it's an array – wesmartin17 Jul 25 '18 at 14:28
1

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

DeborahK
  • 57,520
  • 12
  • 104
  • 129
  • I'd also add that JSON are already JS/TS objects (JSON = JavaScript Object Notation). So merging methods in the response object would be enough – Christian Vincenzo Traina Jul 24 '18 at 19:02
  • Thanks for the answer, but I found out the problem is not converting from json to my data object, but is that when it is converted the helper function is not being instantiated or something. I'm going to move the function out of the data object – wesmartin17 Jul 24 '18 at 19:26