Consume REST IONIC3

Question

hello, I am new in the area of Web and Ionic3 and I have a problem, I followed a tutorial to consume a API Rest, I managed to bring the list with users, however I want to bring a specific user and show on screen, if I change the URL to the user it shows me this error

TabCepPage.html:10 ERROR Error: Cannot find a differ supporting object
'[object Object]' of type 'Leanne Graham'. NgFor only supports binding 
to  Iterables such as Arrays.

my app is like this:

Preview: Rest.ts

apiUrl = 'https://jsonplaceholder.typicode.com';

constructor(public http: HttpClient) {
  console.log('Hello RestServiceProvider Provider');
}

getUsers() {
  return new Promise(resolve => {
    this.http.get(this.apiUrl+'/users/1').subscribe(data => {
      resolve(data);
    }, err => {
      console.log(err);
    });
  });
}

ts of the page:

users: any;

constructor(public navCtrl: NavController, public restProvider: RestProvider) {
  this.getUsers();
}

getUsers() {
  this.restProvider.getUsers()
  .then(data => {
    this.users = data;
    console.log(this.users);
  });
}

and in HTML I display like this:

<ion-item *ngFor="let user of users">
  <h2>{{user.name}}</h2>
  <p>{{user.email}}</p>
</ion-item>

Someone can help me?

Answer 1

If you look at the error calmly you will see that Ngfor is trying to iterate over an object 'Leanne Graham' that there is no support and that is the name attribute returned by the API. As you are only returning an object, your html will look like this:

HTML

<ion-item>
  <h2>{{user?.name}}</h2>
  <p>{{user?.email}}</p>
</ion-item>

Obs: if you use Ctrl+Shift+J, you will open the browser console(Chrome), and you can see how the object is being returned, through the console.log().