angular 2 how to assign an array of JSON response using Observable and map in typescript interface and retrieve in html using *ngFor?

Question

export interface Relation{
name: string;
address: string;
dob: number;
}

My JSON response is

[ {"name":"John", "address":"xyz", "dob":"2000-01-10"},
{"name":"Jamie", "address":"abc", "dob":"1990-01-10"}
]

This is not mapping the response to the Interface! That;s the problem.

relations:Relation []=[];
getRelations() : Observable<Relation[]> {
   return this.http.get('url for json response').map(this.extractData).do(data=>console.log("Get all responses"+JSON.stringify(data))).catch(error => this.errorMessage = error);
}

extractData( response : Response){
let body = response.json();
console.log("Body", body);
return body.data;
}

i call the get Relations but get nothing !

ngOnInit(){
   this.getRelations().subscribe(relations=> relations, error=> this.errorMessage=<any>error);
}

When i try to retrieve the data in HTML as a table row i get nothing! Which means either the Relation[] array is not initialized itself or i'm missing something here.

when i do this i get nothing !

<tr *ngFor="let row of relations"> 
<td> row.name</td>
<td> row.address</td>
<td> row.dob</td>
</tr>

Where are you assigning relations to your response from getRelations()? Edit: Nevermind, I see you just added it. — Ben
– Ben, Commented Jul 20, 2017 at 16:02
@BenBeck When i do this.getRelations().subscribe(relations=> relations, error=> this.errorMessage=<any>error); won't it automatically assign it to relations? — Raghavendra S S
– Raghavendra S S, Commented Jul 20, 2017 at 16:05
Try using .subscribe(relations => this.relations = relations) — Ben
– Ben, Commented Jul 20, 2017 at 16:07
@BenBeck Still not working :( Is it because of my getRelations() : Observable<Relation[]> { return this.http.get('url for json response').map(this.extractData).do(data=>console.log("Get all responses"+JSON.stringify(data))).catch(error => this.errorMessage = error); } — Raghavendra S S
– Raghavendra S S, Commented Jul 20, 2017 at 16:10
I strongly feel the .map function is not mapping ! how can i even verify that it's been mapped? — Raghavendra S S
– Raghavendra S S, Commented Jul 20, 2017 at 16:11

AVJT82 · Accepted Answer · 2017-07-20 20:31:08Z

1

The problem is that your response does not contain an object data, but is just an array, so you should change your extractData to return either the response as is, (and alternatively an empty array):

extractData( response : Response){
  let body = response.json();
  console.log("Body", body);
  return body || []; // here!
}

Also you need to actually assign the data to a variable in your component:

this.getRelations()
  .subscribe(relations=> {
     this.relations = relations
  });

And in your template you are not actually displaying the objects and their properties since you are not using interpolation {{ }}, so need to add that:

<table>
  <tr *ngFor="let row of relations"> 
    <td>{{row.name}}</td>
    <td>{{row.address}}</td>
    <td> {{row.dob}}</td>
  </tr>
</table>

Also it seems you are handling all in the component, we usually have a service to handle the http calls and mapping, and just subscribe in the component.

Service:

@Injectable()
export class Service {

  constructor(private http: Http) { }

  getRelations() : Observable<Relation[]> {
    return this.http.get('url')
     .map(this.extractData)
     .catch(error => console.log(error));
  }

  extractData( response : Response){
    let body = response.json();
    console.log("Body", body);
    return body || [];
  }

}

and in component:

constructor(private service: Service){}

ngOnInit(){
  this.service.getRelations().subscribe(relations=> {
    this.relations = relations;
  });
}

DEMO

edited Jul 20, 2017 at 20:31

answered Jul 20, 2017 at 18:55

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

AVJT82 Over a year ago

where exactly does this data disappear? Are you getting a response at all?

AVJT82 Over a year ago

I updated my answer and with a plunker. there was nothing wrong before (besides the html part) but I wanted to show that we usually use a service for our http calls. And I added a demo. Compare your code to that.

Raghavendra S S Over a year ago

Yeah i get the body from extract Data, but after that i have no idea whether it's mapped or not! because when i try to use it in html it is not there! console.log("Body", body); the above part gives response

Raghavendra S S Over a year ago

I even used [(ngModel)] = relations in html but still i couldn't get it :(

Raghavendra S S Over a year ago

your example works but i do the same it doesn't work for me :(

|

Vi Elite · Accepted Answer · 2017-07-20 16:05:40Z

0

Your code above shows incorrect syntax for ngFor . Look at the documentation for more details

https://angular.io/api/common/NgForOf

answered Jul 20, 2017 at 16:05

Vi Elite

1362 silver badges6 bronze badges

6 Comments

Raghavendra S S Over a year ago

It was a typo i have used of instead of for inside *ngFor

Vi Elite Over a year ago

Yep , then the HTML template as well . And you are missing .subscribe(relations=> this.relations )

Raghavendra S S Over a year ago

i have added it .subscribe(relations => this.relations = realtions) but still not working.

Vi Elite Over a year ago

In this case could you please provide a plunkr ? That should speed up things

Raghavendra S S Over a year ago

Yeah i haven't used plunkr before so please give me couple of minutes to come back with the response! Also thank you very much for helping I'm kind of lost here :(

|

raychz · Accepted Answer · 2017-07-20 16:11:12Z

0

Change your interface to:

export interface Relation{
name: string;
address: string;
dob: string;
}

dob is a string type, not a number.

Further, as Ben said, you either are not assigning your response to relations, or simply did not include that part of your code.

edited Jul 20, 2017 at 16:11

answered Jul 20, 2017 at 16:02

raychz

1,2051 gold badge10 silver badges26 bronze badges

Collectives™ on Stack Overflow

angular 2 how to assign an array of JSON response using Observable and map in typescript interface and retrieve in html using *ngFor?

3 Answers 3

19 Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

19 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related