Eddie Pat Eddie Pat - 4 months ago 25
AngularJS Question

Angular2 Http get

I am trying to be pull data from api using angular2, and bind it to view. After request been done, my component only gets array object [object Object],[object Object],[object Object]. Can i get any help on extracting the object so that "*ngFor" can read each object. I want to be able to bind data to view.

**This is my api**
[{
_id: "578c8c670f3cd0941efb337c",
name: "John",
gender: "Male",
age: "34",
__v: 0,
},
{
_id: "5794a90f96391dcc2436e43f",
name: "Valur",
gender: "Male",
age: "22",
__v: 0,
},
{
_id: "5794abad70df28541eab170b",
name: "Paul",
gender: "Male",
age: "43",
__v: 0,
}]


UserService is like:

import { Http } from 'angular2/http';
constructor(private _http: Http) { }

getuser(): Observable<any> {
return this._http.get('http://localhost:1000/api/users')
.map(res => res.json());
}


This my angular with service that handle request.

import { UserService } from '../services/userservice';

constructor(private userService: UserService) { }
_data: Object;

getUser():void {
this.userService.getuser()
.subscribe(data => this._data = data,
error => console.log(error));

console.log(this._data); //this part doesn't pull data at all.
}


//My view
<div *ngFor="#u of _data">
{{u.name}} //this part gives me an error
</div>

//But when i try to pull data from "subscribe" like this:
<div>
{{_data | json }} //data is available
</div>

Answer

Try this.

import { UserService } from '../services/userservice';

_data: any[];
constructor(private userService: UserService) { this._data = [];}

getUser():void {
  this.userService.getuser()
    .subscribe(data => {this._data = data; console.log(this._data);}
                error => console.log(error));
 }


 //My view
 <div *ngFor="#u of _data">
   {{u?.name}} //this part gives me an error
 </div>