How to access array data from api in ionic 3

Question

I want to access array data and display this data in ion-select.

html

<ion-item>
   <ion-label>Select Time</ion-label>
      <ion-select  interface ="popover">
        <div *ngFor="let item of items">
           <ion-option > {{item}}</ion-option>
        </div>
      </ion-select>

ts file

ionViewDidLoad(){

   let url = 'http://mysiteurl/wp-json/wp/v2/authores/4';

    this.http.get(url, this.config.options).map(res => res.json())
          .subscribe((response: any) => {
              this.items = response;
              response.forEach(item => 
              console.log(this.item));
       }, (err) => {
           let alert = this.alertCtrl.create({
           title: 'Error',
          subTitle: 'Please check your credentials',
          buttons: ['OK']
          });
      alert.present();
    });
   }
 }

and this is my api response

[
"09:00 AM -12:00 PM",
"12:00 PM - 03:00 PM",
"05:00 PM - 07:00 PM"
]

How to access these values in my ion-select option.I am not able to do that.

console.log(this.item) is invalid. Do you want to just print item or this.items? — Amit Chigadani
– Amit Chigadani, Commented Oct 19, 2018 at 9:25
What does console.log(response) print just inside subscribe? — Amit Chigadani
– Amit Chigadani, Commented Oct 19, 2018 at 9:29
console.log(response) print whole response .i attached the image of my response in above question...the image showing the console.log(response). — Mohd Saif khan
– Mohd Saif khan, Commented Oct 19, 2018 at 9:34

Mohd Saif khan · Accepted Answer · 2018-10-19 10:57:20Z

1

@saif khan.. remove spaces in your html

 <ion-item>
       <ion-label>Select Time</ion-label>
          <ion-select [(ngModel)]="item" interface ="popover">
            <div *ngFor="let item of items">
               <ion-option>{{item}}</ion-option>
            </div>
          </ion-select>

and then in the component

 this.http.get(url, this.config.options)
    .map(res => res.json()).subscribe((response: any) => {
          this.items = response;   //this will store your response in items
          response.forEach(item => {
          //if you want print each item in the console
          console.log(item);
           });
        });

edited Oct 19, 2018 at 10:57

Mohd Saif khan

651 silver badge18 bronze badges

answered Oct 19, 2018 at 9:31

Ganesh

6,0663 gold badges26 silver badges43 bronze badges

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

1 Comment

Mohd Saif khan Over a year ago

[ngMode)]="item" is missing in <ion-select interface ="popover">

Collectives™ on Stack Overflow

How to access array data from api in ionic 3

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related