How to display the fetched data from api in angular

Question

Data fetched from api is not getting displayed on screen but i am getting the data in console .

data.service.ts

    const httpOptions = {
      headers:new HttpHeaders({'Content-Type':'application/json'})
     };

    @Injectable()

    export class DataService {

    constructor(private http: HttpClient) {}
    getuserdetails(){
    return this.http.get<any> 
    ('http://jsonplaceholder.typicode.com/users/1')
    .pipe(map(item => {
        return item;
    }));
    }
   }

information.component.ts

 export class InformationComponent implements OnInit {
    dataItem:any = {} 

    constructor(private data: DataService) {
    this.data.getuserdetails().subscribe(item=>{
    console.log(item);
    this.dataItem=item;
  });
   }

  ngOnInit() {
  }

 }

information.component.html

<div *ngIf="dataItem?.length>=0">           
 <div *ngFor='let x of dataItem'>

   {{x.name}}

 </div>
 </div>

Here i am getting the details of user 1 in console but its not getting displayed on main screen.

{id: 1, name: "Leanne Graham", username: "Bret", email: "[email protected]", address: {…}, …} address: {street: "Kulas Light", suite: "Apt. 556", city: "Gwenborough", zipcode: "92998-3874", geo: {…}} company: {name: "Romaguera-Crona", catchPhrase: "Multi-layered client-server neural-net", bs: "harness real-time e-markets"} email: "[email protected]" id: 1 name: "Leanne Graham" phone: "1-770-736-8031 x56442" username: "Bret" website: "hildegard.org" — Ronit
– Ronit, Commented Apr 20, 2019 at 10:42
Well if dataItem === that data, you cant access .length, since it will return undefined. That is not iterable for javascript — noitse
– noitse, Commented Apr 20, 2019 at 10:44
So instead of <div *ngIf="dataItem?.length>=0"> , what should be the condition — Ronit
– Ronit, Commented Apr 20, 2019 at 10:46
I would set default dataItem to null, then simply do ngIf="dataItem" Another thing, you are trying again to iterate in ngFor, there is no need for that, just access data using {{dataItem.name}} — noitse
– noitse, Commented Apr 20, 2019 at 10:48

Shashank Vivek · Accepted Answer · 2019-04-20 13:09:36Z

2

Try putting code in ngOnInit

ngOnInit(){
 this.data.getuserdetails().subscribe(item=>{
  console.log(item);
  this.dataItem=item;
 });
}

and verify in html by doing

<div *ngIf="dataItem">
   {{dataItem |json }}
</div>

Your *ngFor wont work as it is not an array

I think this should work. The constructor is typescript thing. Try to make make API calls in Angular lifecycle hooks

edited Apr 20, 2019 at 13:09

answered Apr 20, 2019 at 10:50

Shashank Vivek

17.6k9 gold badges69 silver badges110 bronze badges

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

1 Comment

R. Richards Over a year ago

The real problem isn't getting the data, it's the fact that the OP is trying to iterate through an object.

profanis · Accepted Answer · 2019-04-20 12:03:24Z

0

Let's see what the issues are:

First You are trying to get the length of dataItem, while it's NOT an array. If you want to check the length, make sure to initialize the dataItem like this dataItem = []

<div *ngIf="dataItem?.length>=0">

Second You are trying to iterate (loop) the dateItem while it's not an array. If you initialize it as seen in the first bullet above, you would be allowed to do so

 <div *ngFor='let x of dataItem'>

If you fix these, you will be able to see the data in the template

Have a look at this for a working example https://stackoverflow-55772639.stackblitz.io

answered Apr 20, 2019 at 12:03

profanis

2,7513 gold badges39 silver badges51 bronze badges

Collectives™ on Stack Overflow

How to display the fetched data from api in angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related