Displaying Http request data on page using Ionic 2

Question

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:

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

I didn't find anywhere you defined this.advisors and where did you set data to it. — Pengyy
– Pengyy, Commented May 16, 2017 at 3:35
Sorry, that was a mistype on my behalf. I have fixed the code in an edit. — iSeeJay
– iSeeJay, Commented May 16, 2017 at 3:42

Pengyy · Accepted Answer · 2017-05-16 03:49:58Z

2

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();
}

answered May 16, 2017 at 3:49

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

1 Comment

iSeeJay Over a year ago

This worked perfectly! I was unsure of how the subscribe function actually worked it seems. Thank you!

Sachila Ranawaka · Accepted Answer · 2017-05-16 03:35:50Z

1

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);
  })
}

answered May 16, 2017 at 3:35

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Collectives™ on Stack Overflow

Displaying Http request data on page using Ionic 2

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