Unable to display API data on frontend


#1

Hi, I am a beginner in both Ionic and APIs. Currently, I have an API where I need to get data and display it on my app. I tried to display the data using the *ngFor but it doesn’t work. Will anyone please guide me on this?

…/providers/christmas

  getDedi() {
   return this.http.get<DediResult>(`${this.dataApiUrl}?//some api`,
      { headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN'))});
  }

admin.ts

@Component({
  selector: 'page-admin',
  templateUrl: 'admin.html'
})
export class AdminPage {

  dedi: Dedi[];

  constructor(public navCtrl: NavController, public navParams: NavParams, public christmasProvider: ChristmasProvider, private storage: Storage) {
    console.log('constructor Testpage');
  }

  gotoDetailspage(dedi){
    this.navCtrl.push(DetailPage, {dedi: dedi});
  }

 ionViewDidLoad(){
    console.log('ionViewDidLoad Adminpage');

  
    this.christmasProvider.getDedi().pipe(
      map((dediResult: DediResult) => dediResult && dediResult.result.records)
    ).subscribe(dedid => {
      this.dedi = dedid;

      for(let i=0; i<this.dedi.length; i++)
      {
      console.log(this.dedi[i].song);
      console.log(this.dedi[i].pledge_amount);
      }
  });

admin.html

<ion-header>
    <ion-navbar color="primary">
      <button ion-button menuToggle>
        <ion-icon name="menu" style="color: #fff"></ion-icon>
      </button>
      <ion-title>
        <p class="header">ADMIN</p>
      </ion-title>
    </ion-navbar>
  </ion-header>

  <br><br><br>
  
  <ion-content padding>
      <h6>DEDICATION:</h6>
        <ion-item *ngFor ="let d of dedi" (click) = gotoDetailspage()>
        <ion-row>
          <ion-col align-self-start style="text-align: left;">
              <p>{{ d.song }}</p> <!--database value-->
              <p>{{ d.pledge_amount }}</p> <!--database value-->
          </ion-col>
        </ion-row>
      </ion-item>
    </ion-content>

…/models/songdedi

export interface DediData {
    data: DediResult;
}

export interface DediResult {
    result: DediRecords;
}

export interface DediRecords {
    records: Dedi[];
}

export interface Dedi {
    dedication_id: Int32Array;
    pledge_amount: Int32Array;
    phone_no: string;
    sing_to: string;
    sing_to_department: string;
    dedication_date: DateTime;
    dedication_time: Time;
    song: string;
    other_song_request: string;
    special_request: string;
    status: string;
    location: string;
    message: string;
    remain_anon: boolean;
}

Thanks guys


#2

your array name is wrong it should dedi instead of dedid


#3

Hmm, i tried that but it does not work as well…


#4

on ionViewDidLoad do one loop and console log the d.song and d.pledge_amount same as you did in html


#5

I’m sorry i’m quite new to this. Sorry to trouble you but how do i perform a while loop for this case?


#6

put this in your ionViewDidLoad()

for(let i=0; i<dedi.length; i++)
{
console.log(“song**”, dedi[i].song);
console.log(“pledg**”, dedi[i].pledge_amount);
}

let me know what are you getting in console


#7

I am getting ERROR TypeError: Cannot read property 'length' of undefined and ERROR TypeError: Cannot read property 'records' of undefined. Console log is not displaying anything


#8

This is because that dedi array is not loaded as subscribing is take place in same function. will you wrap my above loop code put inside of your subscribe or use setTimeOut to delay my loop execution.

Also make sure that you have changed this dedid to dedi

I am in office otherwise i would able to resolve your problem via teamviewer or anyDesk


#9

I see, I have changed it already. Actually, I have modified my codes. I have made the amendments to the post and included your codes into the amendment as well. Please take a look and tell me if I am doing anything wrongly. Currently, it is throwing this error only ERROR TypeError: Cannot read property 'records' of undefined. Thanks a lot for your help btw!


#10

Hey you did not return the response.json() from the http call
If you are failed to resolve this issue before 9PM IST i will try to do via teamviewer or AnyDesk.


#11

Hm, you mean i have to change my provider to

  getDedi() {
   return this.http.get<DediResult>(`${this.dataApiUrl}?//some api`,
      { headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN'))})
      .pipe(
        map((dediResult: DediResult) => dediResult && dediResult.result.records)
      );
  }

and my admin.ts to

ionViewDidLoad(){
    console.log('ionViewDidLoad Adminpage');

  
    this.christmasProvider.getDedi().subscribe(dedid => {
      this.dedi = dedid;

      for(let i=0; i<this.dedi.length; i++)
      {
      console.log(this.dedi[i].song);
      console.log(this.dedi[i].pledge_amount);
      }
  });

Did I understand it correctly? However, the error i get is still the same…


#12

change this to

getDedi() {
   return this.http.get<DediResult>(`${this.dataApiUrl}?//some api`,
      { headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN'))})
      .pipe(
        map((response:Response) => {
 return response.json();
} 
)
      );
  }

Make sure that you import Response from angular/http


#13

No, don’t. This post makes zero sense. You are mixing old deprecated Http with more modern HttpClient syntax. Http does not have templated get, and HttpClient wants neither Response nonsense or calling json().


#14

hi all, thanks for your help. I have managed to solve this issue.


#15

deprecated http but still it is secure, i have been using all the time no issue till now.


#16

Not with the syntax you posted, you haven’t.

If you import http from @angular/http and try to call get with a type argument as you suggest (this.http.get<DediResult>), TypeScript will puke.


#17

i have passed so many arguments with http.get sometime i pass id to get the user post. actually i didnt get the what kind of data will have dediresult Anyway he is already resolved the issue.