How to access JSON value from WordPress rest api in Ionic 3

Question

I am new to Ionic. I want to access the a particular value from WordPress rest API.

I want to access this value from api. title: rendered: "04:00 PM – 07:00 PM"

.ts file

 viewTime(){

   let url = '';


    this.http.get(url, this.config.options)
    .map(res => res.json())
        .subscribe((response: any) => {
            console.log(response)
            console.log(response.title)

                            }, (err) => {
                            let alert = this.alertCtrl.create({
                            title: 'Error',
                            subTitle: 'Please check your credentials',
                            buttons: ['OK']
                                    });
                             alert.present();
                             });
                             }

But console.log(response.title) gives undefined.

Mohd Saif khan · Accepted Answer · 2018-10-18 15:49:40Z

1

It seems to be an array, so you have to loop over collection to get access to each element of an array.

this.http.get(url, this.config.options)
.map(res => res.json())
    .subscribe((response: any) => {
      this.items = response;
      response.forEach(item => console.log(item.title))
    });

View

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

edited Oct 18, 2018 at 15:49

Mohd Saif khan

651 silver badge18 bronze badges

answered Oct 18, 2018 at 13:22

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

3 Comments

Mohd Saif khan Over a year ago

Thanks you sir solve my problem..Can you tell me how to access these title value in ion-select..?have you any idea

Pankaj Parkar Over a year ago

@Saifkhan you want to populate an value?

Mohd Saif khan Over a year ago

Yes sir using ion-select. and sir how to remove this ' –' with - between two time slot.

fkuehne · Accepted Answer · 2018-10-18 14:17:35Z

0

To display the time slot correct, you can use something like this:

 <p [innerHTML]="item.title.rendered"></p>

like in the above example, do something like this:

let times: string[];
response.forEach(item => times.push(item.title.rendered);

Then in HTML:

<ion-select [(ngModel)]="data.selectedTime" multiple>
  <ion-option *ngFor="#time of times" [value] = "time" [checked]="false">{{time}}   </ion-option>
</ion-select>

edited Oct 18, 2018 at 14:17

answered Oct 18, 2018 at 13:53

fkuehne

911 silver badge6 bronze badges

3 Comments

fkuehne Over a year ago

Is it not working in a ion-select or also not working in a normal <p> in the ion-content?

Mohd Saif khan Over a year ago

not working try with ion-select.i have not try with ion-content.

Mohd Saif khan Over a year ago

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

Collectives™ on Stack Overflow

How to access JSON value from WordPress rest api in Ionic 3

2 Answers 2

3 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related