Can't show object on Ionic

Question

I have those mock users created:

private mockUsers =
    {
      "cristian@correo.com": {
        name: "Cristian Sures Vera",
        gender: "male",
        birthday: "1995-12-29",
        city: "Telde",
        phone: "686722255",
        email: "cristian@correo.com",
        type: "doctor",
        password: "1234"
      },
      "antonio@correo.com": {
        name: "Antonio Perez Perez",
        gender: "male",
        birthday: "1990-04-22",
        city: "Las Palmas",
        phone: "444555666",
        email: "antonio@correo.com",
        type: "patient",
        password: "1234",
        exercises: {}
      }
    };
  getUsers() {
    return this.mockUsers;
  }

And I'm trying to show it doing that:

search.html

  <ion-searchbar (ionInput)="search($event)" ></ion-searchbar>
  <ion-list>
    <ion-item *ngFor="let user of users" >
      {{user}}
    </ion-item>
  </ion-list>

search.ts

  private users;

  constructor(public navCtrl: NavController, public userProvider: UserProvider) {
    this.users = userProvider.getUsers();
  }

  search(event){
    this.users = this.userProvider.getUsers();

    let val = event.target.value;

    if (val && val.trim() != ''){
      for (let key in this.users) {
        if(searchValueIsInTheUsername(this.users[key])){
          return this.users[key];
        }
      }
    }

    function searchValueIsInTheUsername(user: any) {
        return user['name'].toLowerCase().includes(val.toLowerCase());
    }
  }

I have to print all the users and cant use *ngFor because is an object and is not supported. Do I have to change the form that I return the object? Or I have another form to show all users within *ngFor ?

All the project is public on github on the search-patient branch

Answer 1

It depends on your api return type. If you rest api is returning list of users then it's better to store the Json in the same format. To convert the object to list and to be able to use it, make the following change:

private mockUsers: any[] =
[
  "cristian@correo.com": {
    name: "Cristian Sures Vera",
    gender: "male",
    birthday: "1995-12-29",
    city: "Telde",
    phone: "686722255",
    email: "cristian@correo.com",
    type: "doctor",
    password: "1234"
  },
  "antonio@correo.com": {
    name: "Antonio Perez Perez",
    gender: "male",
    birthday: "1990-04-22",
    city: "Las Palmas",
    phone: "444555666",
    email: "antonio@correo.com",
    type: "patient",
    password: "1234",
    exercises: {}
  },
  "another@correo.com": {
    name: "Another mock user",
    gender: "male",
    birthday: "1990-04-22",
    city: "Las Palmas",
    phone: "444555666",
    email: "another@correo.com",
    type: "patient",
    password: "1234",
    exercises: {}
  }
   ] ;