How to show on HTML the result from HTTP get angular

Question

I'm trying to show the result from a Http.get() on my HTML, but it only shows when I have an error, I mean, if I get a 404 not found, it will print only a message on my HTML, but now that I do not have a 404 I have a response, I'd like to know how to print it using HTML. I'll explain the structure of my project...

I have a folder called provider where I have the list-service.ts, it contains the get...

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

@Injectable()
export class ListServiceProvider {
    private headers = new Headers({'Content-Type': 'application/json'});
    private apiUrl = ""; // URL to web api

  constructor(public http: Http) {
    console.log('Hello I'm the ListServiceProvider Provider');
  }

  getList(): Promise<List[]> {
    return this.http.get(this.apiUrl+'list/')
               .toPromise()
               .then(response => response.json().data as List[])
               .catch(this.handleErrorPromise);
  }

   //if an error ocurred while doing api calls 
  private handleErrorPromise (error: Response | any) {
  console.error(error.message || error);
  return Promise.reject(error.message || error);
    }

}

Now I've created a class on app folder (don't know if it's the best way to place it...) called List

export class List{
    name: string;
    surname: string;
    phoneNumber: any;
    imageURL: string;
    email: string;

    constructor(name: string,
    surname: string,phoneNumber: any,
    imageURL: string,
    email: string){
        this.name = name;
        this.surname = surname;
        this.phoneNumber = phoneNumber;
        this.imageURL = imageURL;
        this.email = email;

    }
}

And now I have a List-list.ts file where I do the calls and save the objects as follows

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { List} from '../../app/list';

@IonicPage()
@Component({
  selector: 'page-list-list',
  templateUrl: 'list-list.html'
})
export class listListPage implements OnInit{
   promiseList: Promise<List[]>
   mList: List[];
   errorMessage: String;


  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private listServiceProvider: ListServiceProvider
    ){}  

  ngOnInit(): void {
  this.promiseList= this.listServiceProvider.getList();
  this.promiseList.then(
           list=> this.mList= list,
           error =>  this.errorMessage = <any>error);


   }

}

And finally on my HTML I have this...

<ul>
    <li *ngFor="let list of promiseList | async">
        Name: {{list.name}}, Surname: {{list.surname}}
    </li>
</ul>
<div *ngIf="errorMessage">
    <ion-card>
        <ion-item>
            <h2>There's an error</h2>
        </ion-item>
    </ion-card>
</div>

When I got a 404 error it shows the div but if I get a response from my API it didn't show the name and surname from list... What I'm missing?

You have syntax errors in your code, just look at the syntax highlighting. — Musa
– Musa, Commented Jun 22, 2017 at 13:48
@Musa .... that's because I've deleted the api url.... I'm not saying that my code isn't compiling, but thanks I'll edit that — StuartDTO
– StuartDTO, Commented Jun 22, 2017 at 13:50
Vous devez utiliser ngFor dans votre mlist. Pas dans votre promiseList. Your data is in your mList, your promiseList have the request http. — nevradub
– nevradub, Commented Jun 22, 2017 at 13:54
async is the issue. Don't use async` . It is used when you are using Observables. Removing it should work. Here you are using promise. I can help you if you want to do it observable way. — Vamshi
– Vamshi, Commented Jun 22, 2017 at 13:56
Change component code to this . this.promiseList= this.listServiceProvider.getList().then( ... — Vamshi
– Vamshi, Commented Jun 22, 2017 at 13:57

Vamshi · Accepted Answer · 2017-06-22 14:13:07Z

1

You got too many issues to solve in the comments .

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

@Injectable()
export class ListServiceProvider {
    private headers = new Headers({'Content-Type': 'application/json'});
    private apiUrl = ""; // URL to web api

  constructor(public http: Http) {
    console.log("Hello I'm the ListServiceProvider Provider");
  }

  getList(): Promise<List[]> {
    return this.http.get(this.apiUrl+'list/')
               .toPromise()
               .then(response => {
                    let data = response.json().data as List[];
                    console.log(data);
                    return data;
                )
               .catch(this.handleErrorPromise);
  }

   //if an error ocurred while doing api calls 
  private handleErrorPromise (error: Response | any) {
  console.error(error.message || error);
  return Promise.reject(error.message || error);
    }

}

Component should be something like this .

export class listListPage implements OnInit{
   // promiseList: Promise<List[]>
   mList: List[];
   errorMessage: String;


  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private listServiceProvider: ListServiceProvider
    ){}  

  ngOnInit(): void {
      this.listServiceProvider.getList()
         .then(
           list=> {this.mList= list; console.log(list)},
           error =>  this.errorMessage = <any>error);
   }

}

In your HTML it should be

<ul>
    <li *ngFor="let list of mList">
        Name: {{list.name}}, Surname: {{list.surname}}
    </li>
</ul>

UPDATE : Using rx.

First get your promise code to work. Then try this.

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

@Injectable()
export class ListServiceProvider {
    private headers = new Headers({'Content-Type': 'application/json'});
    private apiUrl = ""; // URL to web api

  constructor(public http: Http) {
    console.log('Hello I'm the ListServiceProvider Provider');
  }

  getList(): Promise<List[]> {
    return this.http.get(this.apiUrl+'list/')
               .do(response => console.log('response',response)
               .map(response => response.json().data);                   
  }

}

Component

import { Component, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';

import { List} from '../../app/list';

@IonicPage()
@Component({
  selector: 'page-list-list',
  templateUrl: 'list-list.html'
})
export class listListPage implements OnInit{
   mList$: Observable<List[]>;
   errorMessage: String;


  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    private listServiceProvider: ListServiceProvider
    ){}  

  ngOnInit(): void {
     this.mList= this.listServiceProvider.getList();
  }

}

Inside your HTML

  <ul>
        <li *ngFor="let list of mList | async">
            Name: {{list.name}}, Surname: {{list.surname}}
        </li>
    </ul>

edited Jun 22, 2017 at 14:13

answered Jun 22, 2017 at 14:01

Vamshi

9,3615 gold badges41 silver badges55 bronze badges

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

12 Comments

StuartDTO Over a year ago

Thanks for you answer, but still without showing anything, is there any way to know if it's giving to me the correct result?

Vamshi Over a year ago

I put console.log statements. try now

StuartDTO Over a year ago

it says undefined

Vamshi Over a year ago

which line response or component,

nevradub Over a year ago

getList(): Promise<List[]> { return this.http.get(this.apiUrl+'list/') .toPromise() .then(response => console.log(response.json().data)) .catch(this.handleErrorPromise); }

|

nevradub · Accepted Answer · 2017-06-22 14:15:04Z

1

Your data is in your mList:List[]. And you use *ngFor in your promiseList: Promise<List[]>

TS

ngOnInit(): void {
  this.listServiceProvider.getList().then(
           list=> this.mList= list, //mList contains all data from server side
           error =>  this.errorMessage = <any>error);


   }

HTML

<ul *ngIf="mList">
    <li *ngFor="let list of mList">
        Name: {{list.name}}, Surname: {{list.surname}}
    </li>
</ul>
<div *ngIf="errorMessage">
    <ion-card>
        <ion-item>
            <h2>There's an error</h2>
        </ion-item>
    </ion-card>
</div>

edited Jun 22, 2017 at 14:15

answered Jun 22, 2017 at 13:59

nevradub

2381 silver badge9 bronze badges

10 Comments

nevradub Over a year ago

Ok look my update. Use this.listServiceProvider().then instead of this.mList= this.listServiceProvider.getList(); You need set mList in callback from your service.

StuartDTO Over a year ago

How can I know if my response is OK?

nevradub Over a year ago

.map(response => console.log(response.json().data)); in your service.

StuartDTO Over a year ago

Type 'void' cannot be converted to type 'List[]'. doing this : .then(response => console.log(response.json().data) as List[])

nevradub Over a year ago

Swtich your type to any for testing

|

Collectives™ on Stack Overflow

How to show on HTML the result from HTTP get angular

2 Answers 2

12 Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related