CODEWITHSUNDEEP
angularionic2
iSeeJay
iSeeJay

Reputation: 883

Displaying Http request data on page using Ionic 2

I am working on a project in where i have a JSON file on a server which looks something like this:

{
   "user1": false,
   "user2": false,
   "user3": false,
   "user4": false
}

I then make a request to the server in my search-service which looks somthing like this (but the actual URL is in there):

user-service.ts

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class UserServiceProvider {

     data: any;

      constructor(public http: Http) {
        console.log('Hello UserServiceProvider Provider');
      }

      loadUserMap(){
        return this.http.get(httpUrlToJSON).map(res => res.json()).subscribe(data => {
          this.data = data
          console.log(data);
        })
    }
    }

Whenever I call the loadUserMap function in my home.ts, the log of the data says it is returning the JSON file above as an object. However, I am unsure on how I may go about displaying and using this data within my app. I try to do it in the following way:

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HttpModule } from '@angular/http';
import { Http } from '@angular/http';
import {UserServiceProvider} from '../../providers/user-service/user-service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [HttpModule, UserServiceProvider]
})
export class HomePage {

  public users: Object;
  public namesArray;

  constructor(public navCtrl: NavController, public userService: UserServiceProvider) {
    this.users = this.loadUsers();
    this.namesArray = Object.keys(this.users);

  }

  loadUsers(){
    return this.advisorService.loadUsers();
  }


 }

home.html

<ion-navbar *navbar>
  <ion-title>
    Home
  </ion-title>
</ion-navbar>

<ion-content class="home">
  <ion-list>
    <ion-item *ngFor="let user of namesArray">
      <h2>{{user}} </h2>
    </ion-item>
  </ion-list>
</ion-content>

However the outcome is this:

enter image description here

How would I properly go about displaying this data within the app?

Upvotes: 2

Views: 864

Answers (2)

Pengyy
Pengyy

Reputation: 38189

remove the subscribe part in your service.

loadUserMap(){
    return this.http.get(httpUrlToJSON).map(res => res.json());
}

subscribe at your component and use Object.map to get the keys of response result.

loadUsers(){
  // advisorService should be advisorService?(a typo?)
  this.advisorService.loadUsers().subscribe(data => {
    this.users = data;
    this.namesArray = Object.keys(data);
  });
}

change your constructor to only call loadUsers function:

constructor(public navCtrl: NavController, public userService: UserServiceProvider) {
  this.loadUsers();
}

Upvotes: 2

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41445

don't subscribe inside loadUserMap function. just return the http and subscribe it inside loadUsers function 

import { Http,Response } from '@angular/http';

loadUserMap(){
     return this.http.get(httpUrlToJSON).map((res:Response) => res.json());
}

constructor(public navCtrl: NavController, public userService: UserServiceProvider) {
    this.loadUsers(); 
}

loadUsers(){
   this.userService.loadAdvisorMap().subscribe(data => {
      this.namesArray = data
      console.log(data);
  })
}

Upvotes: 1

Related Questions