Issue with Observable in ionic

Ionic Framework ionic-v3
1

I am new to ionic and facing issues related to Observable. I want to get data from http and show them on the view but I cant figure out how to get the view to display the data. Any help is appreciated, thanks.

Data From API

{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "testst",
      "purpose": "sale",
      "address": "ddd",
      "beds": 3,
      "baths": 3,
      "size": "3",
      "price": 23,
      "description": null,
      "contact_details": "dsdfdsfsfd",
      "status": "inactive",
      "created_at": "2019-01-21 15:18:39",
      "updated_at": "2019-02-28 08:44:25",
      "deleted_at": null,
      "images": []
    },
    {
      "id": 2,
      "name": "testst",
      "purpose": "rent",
      "address": "tsyetsyety",
      "beds": 3,
      "baths": 3,
      "size": "3",
      "price": 3,
      "description": null,
      "contact_details": "3432",
      "status": "inactive",
      "created_at": "2019-01-21 15:19:20",
      "updated_at": "2019-01-21 15:19:20",
      "deleted_at": null,
      "images": []
    },
    {
      "id": 3,
      "name": "testst",
      "purpose": "rent",
      "address": "tsyetsyety",
      "beds": 3,
      "baths": 3,
      "size": "3",
      "price": 3,
      "description": null,
      "contact_details": "3432",
      "status": "inactive",
      "created_at": "2019-01-21 15:21:23",
      "updated_at": "2019-01-21 15:21:23",
      "deleted_at": null,
      "images": []
    }
  ],
  "message": "Houses retrieved successfully"
}

Code from provider


  getHousesData() {
    return this.http.get(this.apiUrl+'/houses')
    .map (results => {
      results = results['data'];
        results['data'];       
    });
  }

Code from the page

houseslist: Observable<any>;
getHouses() {
 
  this.houseslist = this.housesService.getHousesData();
    this.houseslist.subscribe(data => {
     console.log(data);
 
  }, err => {
    console.log(err);
  });  
}
2

What version of Ionic? In Ionic 4 it is simply…

  getHousesData() {
    return this.http.get(this.apiUrl+'/houses')
  }

…then…

getHouses() {
   this.housesService.getHousesData()
  .subscribe(res => {
     console.log(res["data"]);
   }, err => {
    console.log(err);
  });  
}

It’s a good idea to set up an interface so you can map data to appropriate properties.

3

Thank you for your reply. Finally figured out how to get this done.

I am using Ionic 4