How to use data given by API in ionic

Question

I'm very new to mobile app development and ionic so forgive me if this is a silly question.

I want my app to be able to choose from a list of exercises that are giving by an API and I want to be able to pass that data (in this case its just the name of the exercise I want) to another page but when I try to log it returns as undefined. I think it might be an issue with it being an object rather than a string but I'm not sure.

Here is my code:


     <ion-header>
        <ion-toolbar>
          <ion-title>Add Exercise</ion-title>
          <ion-buttons slot ="end">
            <ion-button (click)="dismissModal()">Close</ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
    
      <ion-content>
        <ion-list *ngFor="let results of exerciseList">
          <ion-item button (click)="addExercise($exercise)" [(ngModel)]="exercise" ngDefaultControl>
            {{results.name}}
          </ion-item>
        </ion-list>
      </ion-content>

and here is my typescript code:


    import { Component, OnInit } from '@angular/core';
    import { HttpClient } from '@angular/common/http';
    import { ModalController } from '@ionic/angular';
    
    
    @Component({
      selector: 'app-exercise-modal',
      templateUrl: './exercise-modal.component.html',
      styleUrls: ['./exercise-modal.component.scss'],
      
    })
    export class ExerciseModalComponent implements OnInit {
      public exerciseList: any = "";
      exerciseName : any;
      constructor(private http: HttpClient, private modalCtrl: ModalController) { }
    
      ngOnInit() {
        console.log("inside create")
        this.http.get('https://wger.de/api/v2/exercise/').subscribe((response) => {console.log(response);this.exerciseList = response['results']});
      }
    
      dismissModal(){
        this.modalCtrl.dismiss();
      }
    
      addExercise(exercise: any){
        this.exerciseName = this.exerciseList; 
        console.log(this.exerciseName);
      }
    }

score 0 · Answer 1 · answered Mar 20 '21 at 10:20

0

try debugging theresponse in chrome: https://stackoverflow.com/a/53203661/7192651

further more you can try evaluating expressions and watches: https://developers.google.com/web/tools/chrome-devtools/javascript/watch-variables

answered Mar 20 '21 at 10:20

Yuqiu G.

348
4
7

score 0 · Answer 2 · answered Mar 21 '21 at 18:42

I assume that you'll get the data from the API request. Please do these changes to your current code.

In HTML :

<ion-content>
        <ion-list *ngFor="let exercise of exerciseList">
          <ion-item button (click)="addExercise(exercise)" ngDefaultControl>
            {{exercise.name}}
          </ion-item>
        </ion-list>
</ion-content>

In TS :

addExercise(exercise: any){
   this.exerciseName = exercise.name;
   console.log(this.exerciseName);
}

How to use data given by API in ionic

2 Answers2