getting undefined in accessing a associative array in angular 2 Interpolation

Question

I am able to subcribe to a websocket and getting observable stored in associative array. Now when I log the incoming data in .ts file and in .html - I get different results. In .ts file its working fine - I am getting MessageEvent continuously but in .html using interpolation - one way binding of angular 2 - I get "undefined" and error(shown below) in console (I used a pipe to log to console).

I am either referring to a wrong place OR else angular 2 interpolation is not supporting getting values from associative arrays OR my display code is wrong

Please let me know where am I wrong and how can I solve it.

My Code in ts file:

this.fundList.forEach(element => {
      this.fundSocketList[element.fundName] = this.http.getRealTimeFundDataConnection(element.fundName);
      this.fundSocketList[element.fundName].subscribe(
        msg => console.log(msg) // MessageEvent Object is shown on console
      );
    });

My Code in html file:

<h2 class="media-heading">{{fundDetail.fundName}}
<span class="label label-danger">{{ fundSocketList[fundDetail.fundName].data.performance | async | log | json }}</span> <!-- gives error of undefined -->
</h2>

I get following error in console:

Error: Error in ./DashboardComponent class DashboardComponent - inline template:51:41 caused by: Cannot read property 'performance' of undefined at ViewWrappedError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3236:33) at ViewWrappedError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:29086:16) at ViewWrappedError.WrappedError [as constructor] (http://localhost:4200/vendor.bundle.js:29151:16) at new ViewWrappedError (http://localhost:4200/vendor.bundle.js:58885:16) at View_DashboardComponent2.DebugAppView._rethrowWithContext (http://localhost:4200/vendor.bundle.js:79682:23) at View_DashboardComponent2.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:79655:18) at ViewContainer.detectChangesInNestedViews (http://localhost:4200/vendor.bundle.js:79789:37) at View_DashboardComponent1.detectChangesInternal (/AppModule/DashboardComponent/component.ngfactory.js:185:14) at View_DashboardComponent1.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:79457:14) at View_DashboardComponent1.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:79652:44) at ViewContainer.detectChangesInNestedViews (http://localhost:4200/vendor.bundle.js:79789:37) at CompiledTemplate.proxyViewClass.View_DashboardComponent0.detectChangesInternal (/AppModule/DashboardComponent/component.ngfactory.js:2654:15) at CompiledTemplate.proxyViewClass.AppView.detectChanges (http://localhost:4200/vendor.bundle.js:79457:14) at CompiledTemplate.proxyViewClass.DebugAppView.detectChanges (http://localhost:4200/vendor.bundle.js:79652:44) at CompiledTemplate.proxyViewClass.AppView.internalDetectChanges (http://localhost:4200/vendor.bundle.js:79442:18)

try it using safe operator like this fundSocketList[fundDetail?.fundName]?.data?.performance — Pardeep Jain

Abdeali Chandanwala Abdeali Chandanwala · Accepted Answer · 2017-03-16T11:21:16

The issue was ... I wasnt parsing the incoming data .... The data was in a string format .. and thats why it was working in console and not in UI and also I mad a new associative array - and updated it by subscribing to the Subject which was received from the websocket service.

getting undefined in accessing a associative array in angular 2 Interpolation

1 Answers