Unable to display API data on frontend

@jaywrye wrote:

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 am able to get the data in Array format and am having troubles displaying it. I tried to change the data format to JSON but to no avail. I have also tried to display the data using the *ngFor but it doesn’t work as well. Will anyone please guide me on this?

The data I see in console.log is in this format (I attached the code for one record):

{resource_id: Array(1), limit: 100, total: "62", records: Array(62)}
limit: 100
records: Array(62)
1:
dedicated_date: "1900-01-01T00:00:00"
dedicated_time: "00:00:00"
dedication_id: 4
location: "some text"
message: "some text"
other_song_request: ""
phone_no:"1234567"
pledge_amount: 300
remain_anon: 0
sing_to: "some text
sing_to_department: "some text"
song: "some text"
special_request: ""
status: ""

I also see this on my console log:

hello
Subscriber {closed: false, _parent: null, _parents: null, _subscriptions: Array(1), syncErrorValue: null, …}
closed: false
destination: SafeSubscriber {closed: false, _parent: null, _parents: null, _subscriptions: null, syncErrorValue: null, …}
isStopped: false
syncErrorThrowable: false
syncErrorThrown: false
syncErrorValue: null
_parent: null
_parents: null
_subscriptions: []
__proto__: Subscription 

…/providers/christmas

  getDedi() {
   return Observable.create(observer => 
      this.http.get<DediResult>(`${this.dataApiUrl}?//some api
        { headers: new HttpHeaders().set('X-XSRF-TOKEN', this.getCookie('XSRF-TOKEN'))})
        .subscribe(data => {
        console.log(data);
        /*observer.next(true);
        observer.complete();*/
      }, error => {
        console.log(error);
        observer.next(false);
        observer.complete();
      })
    )
  }

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 Testpage');

    const dedicator = this.christmasProvider.getDedi().subscribe(dedid => {
      this.dedi = dedid;
    });
    console.log('hello', dedicator);
  }      
}

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 dedid " (click) = gotoDetailspage()>
        <ion-row>
          <ion-col align-self-start style="text-align: left;">
              <p>{{ d.song }}</p> 
              <p>{{ d.pledge_amount }}</p> 
          </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: string;
    pledge_amount: number;
    phone_no: number;
    sing_to: string;
    sing_to_department: string;
    dedicated_date: string;
    song: string;
    other_song_request: string;
    special_request: string;
    status: string;
    location: string;
    message: string;
    remain_anon: string;
}

Thanks guys

Posts: 1

Participants: 1

Read full topic