Angular2 Typescript compile error when mapping JSON response name with underscore to Object Array

Question

I'm new to angular2 and am attempting to map a JSON response to an array of custom objects. The strange behavior I am seeing is when I attempt to access a variable with an underscore in it, I receive a compile error. I modeled after the Tour of Heroes code.

My Object is:

export class EventCount {
  event_count: number;
  name: string;
  id: string;  
}

To match the JSON response sample:

[{"event_count":10,"name":"dev-03","id":"0001"},
 {"event_count":6,"name":"dev-02","id":"0002"}]

My http.get request looks like:

getEventCounts(): Observable<Array<any>> {
  let headers = new Headers({ 'Content-Type': 'application/json' });
  let options = new RequestOptions({ headers: headers });
  let query = this.getEventCountURL;
  return this.http.get(query, options)
    .map(this.extractCounts)
    .catch(this.handleError);
}

And the function called within the map looks like:

private extractCounts(response: Response) {
  if (response != null) {
    try {
      let myCounts = response.json() as EventCount[];
      for (let entry of myCounts) {
        console.log("Name: " + entry.name + ", id: " + entry.id );
      }
    } catch (e) {
      console.error(e.toString());
    }
  }
  return myCounts;
}

The above code works fine and I receive the correct output in the console log.

Name: dev-03, id: 0001
Name: dev-02, id: 0002

However when I change the log to the following:

console.log("Name: " + entry.name + ", count: " + entry.event_count );

I get a compile error:

ERROR in .../count.service.ts: Property 'event_count' does not exist on type 'EventCount'.

In the VSCode debugger I can clearly see that the event_count variable within the entry object is getting populated when I am not using it in the log printout.

Thoughts or ideas? Thanks in advance!

The fact that the property exists at runtime is irrelevant. What you have is a compilation error. You probably defined two EventCount classes or interfces, and are importing the wrong one. Or you forgot to save the change adding this property to the class. ALso note that setting a content type for a GET request doesn't make much sense, snce a GET request doesn't have any content. And even for POST and PUT, angular does it for you when sending an object or an array. — JB Nizet
@JBNizet I verified that there was only one instance of the class. I removed the console log in count.service.ts and pushed the response all the way to my html, and it worked! However, I noticed that it doesn't appear to matter what my variable is named in EventCount class. TO test, I changed event_count to eventcount and event_count2 and continues to work (also hard refreshed the browser + restarted npm). Now I am able to print the value in count.service.ts like I wanted before; I'm not exactly sure where the snag was. Thanks for the pointers on the GET request. — aspergillusOryzae

GeorgeAnagnostopoulos GeorgeAnagnostopoulos · Accepted Answer · 2017-05-26T20:31:50

I see only one problem with your code which is almost identical what that of angular.io documentation on Http. This has to do with the local definition of myCounts which cannot be seen where the return statement needs it. Other that this, when I replaced entry.id with entry.event_count everything went fine. I declared let myCounts: EventCount[] before your if statement, removed the as EventCount[] also. Since you're new to Angular you should use the latest version of the platform.

Angular2 Typescript compile error when mapping JSON response name with underscore to Object Array

1 Answers