How to populate list from rest services


#1

Hi im using @ionic-native/http to make http request in my ionic app, i’m able to retrieve the respond from my web api, but i’m still not able to use the data to populate my list, i check the data from view and respond is not null, so why i still dont get the list ?
here is my code

import {Component} from '@angular/core';
import {Http} from "@angular/http"
import {Geolocation} from '@ionic-native/geolocation';
import {HTTP} from '@ionic-native/http'
@Component({
 selector:'person-home',
 templateUrl: 'person.html'
})

 export class PersonPage{
     item: any ;
     constructor(public http : HTTP){
         
     }
     ionViewWillEnter(){
        let  body = {
            "Param" :"param1",
            "Param" :"param2"
         }
         let headers = {
            'Content-Type': 'application/json'
        };
        this.http.post('http://test.com' ,body ,headers )
        .then(res => {
          
           this.item = res.data;
           alert(res.data);
          }
        )
        .catch(err =>{
            alert(err)
        }
       );
     }
     
 }

and here is my html file

<ion-header>
    <ion-navbar>
        <ion-title>
            Person
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-list inset>
      <h2>{{item.parmPurchReqId}}</h2>
      <p>{{item.parmPurchReqName}}</p>
      </ion-list>
</ion-content>

and my json

[
    {
        "parmPurchReqId": "PR-000000331",
        "parmPurchReqName": "RIKSA"
    },
    {
        "parmPurchReqId": "PR-000000332",
        "parmPurchReqName": "RIKSA"
    }
]

Can you tell me what is wrong in here ? why my list still not appear
Thanks in Advance


#2

Hi@gumilangtheodorus
Your response.json is an array.
So you have ti loop the array.Then only you can list the contents.
Use ngFor for looping

 <ion-list inset *ngFor="let data of item">
      <h2>{{data.parmPurchReqId}}</h2>
      <p>{{data.parmPurchReqName}}</p>
 </ion-list>

#3

hi i already add the ngFor, but why i still didnt get the list ?


#4

@gumilangtheodorus I cannot see the ngFor on your code.
Can you please console the response res? not res.data
Seems res is the array.You assigned res.data to items.


#5

hi console.log() for res is [OBject][OBJECT]


#6

@gumilangtheodorus
Then change the code

`this.item = res.data;`  
to 
this.item = res;

and loop again

<ion-list inset *ngFor="let data of item">
      <h2>{{data.parmPurchReqId}}</h2>
      <p>{{data.parmPurchReqName}}</p>
 </ion-list>

#7

Hi sorry to bother you , i tried that and this is the error i get


Can you help me here Thanks


#8

Please show ur HTML code


#9
<ion-header>
    <ion-navbar>
        <ion-title>
            Person
        </ion-title>
    </ion-navbar>
</ion-header>
<ion-content>
    <ion-list inset *ngFor="let data of item">
      <h2>{{item.parmPurchReqId}}</h2>
      <p>{{item.parmPurchReqName}}</p>
      </ion-list>
</ion-content>

here is my html code


#10

@gumilangtheodorus
change these item to data

  <h2>{{item.parmPurchReqId}}</h2>    wrong
      <p>{{item.parmPurchReqName}}</p>  wrong

  <h2>{{data.parmPurchReqId}}</h2>    right
      <p>{{data.parmPurchReqName}}</p>

#11

Why aren’t you using the Angular HttpClient?


#12

im still new in ionic, so should i change using angular httpclient ?