Read json file and display the values in angular

Question

I want to read a json file and display the values in a table. I've tried

this.http.get('./data/file.json')
   .map(response => response.json())
   .subscribe(result => this.results =result,
    function(error) { console.log("Error happened" + error)}, 
    function() { console.log(this.results)});

and this:

this.http.get("./data/file.json")
  .map(response => { return <ITest[]>(<ITest[]>response.json())})
  .subscribe(result => this.results =result,
    function(error) { console.log("Error happened" + error)}, 
    function() { console.log(this.results)});

but I'm always getting undefined in the console. The GET response is ok, I can see the response in the network view in debugger. I don't know what I'm missing.

The html looks like:

 <ng-container  *ngFor='let stat of results;let i = index' [attr.data-index]="i">
   <tr>
      <td style="text-align:left!important;" class="table-row">{{stat.Name}}</td>
      <td class="table-row"> </td>
      <td class="table-row">{{stat.Age}} </td>
   </tr>
   <tr *ngFor="let subitem of stat.Intervals">
      <td style="text-align:right!important;">{{subitem.StartDate}}</td>
      <td>{{subitem.EndDate}}</td>
      <td >{{subitem.Duration}}</td>
   </tr>
</ng-container>

how **does** your response look like? – AT82 Jul 24 '17 at 14:23 — AT82, Jul 24 '17 at 14:23

Amit Chigadani · Answer 1 · 2017-07-24T14:23:13.070

2

Use arrow operator => instead of function(). If you are using function() you will loose the scope of this and hence get undefined.

    this.http.get('./data/file.json')
                      .map(response => response.json())
                      .subscribe(result => this.results =result,
                         error=> console.log(error),
                         () => console.log(this.results));

edited Jul 24 '17 at 14:23

answered Jul 24 '17 at 14:19

Amit Chigadani

28,482
13
80
98

In this way I'm getting the values in the console, which is ok, but my table is not populated with the values.... – Me5 Jul 24 '17 at 14:22
Any errors on browser's console? And can you show how `this.results` look like? – Amit Chigadani Jul 24 '17 at 14:53
no errors in console...(16) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object] -> this is the result, after expanding one of the objects I`m getting this: Object Name : "Tito" Age : "20" __proto__ : Object – Me5 Jul 24 '17 at 14:55
can you post your json please? – ashley Jul 24 '17 at 15:13

AT82 · Answer 2 · 2017-07-24T15:32:44.993

0

Do not use async in template, since you are manually subscribing. If you were not to use subscribe then use async, because it does the subscription for you.

Also, use fat arrow syntax for keeping the context of this., just like Amit said. So change that code to what Amit has presented:

this.http.get('./data/file.json')
   .map(response => response.json())
   .subscribe(result => this.results =result,
     error=> console.log(error),
     () => console.log(this.results));

As for why nothing is displayed in template is because you are using wrong property names. This is case sensitive, so response you are receiving has properties Name and Age based on your comment. So what you need to use is stat.Age and stat.Name in your iteration.

<ng-container *ngFor='let stat of results;let i = index' [attr.data-index]="i">
   <tr >
     <td style="text-align:left!important;" class="table-row">{{stat.Name}}</td>
     <td class="table-row"> </td>
     <td class="table-row">{{stat.Age}} </td>
   </tr>
</ng-container>

edited Jul 24 '17 at 15:32

answered Jul 24 '17 at 15:20

AT82

71,416
24
140
167

I`ve corrected the case sensitivity, but still not working... – Me5 Jul 24 '17 at 15:24
it should work... check your code against this: http://plnkr.co/edit/oc5sUlkzZsyxucUjUYmG?p=preview Also I'd use a service to make http requests – AT82 Jul 24 '17 at 15:35
Finally I found what was the problem. I needed to add this.change.markForCheck(); in subscribe and it`s working – Me5 Jul 25 '17 at 14:15
Okay, so change detection was for some reason triggered. Well these things sometimes happen :) – AT82 Jul 25 '17 at 14:37

Read json file and display the values in angular

2 Answers2