Ionic Wordpress get data from an object javascript problem

Ionic Framework ionic-v3
1

Hi,
i m newbie developing an simple app that get data from a Wordpress template that has custom fields.
I can get all data from my WP backoffice including the costum fields data, except a object that inside my object data, and retrieving the data from that function and displaying it in my page.

The app is a simple tour app, where i a couple of fields for text and another field for images.

When i look to the object that i get from my call i get :

32
Screen Shot 2018-07-06 at 20.28.32.png448×632 66.2 KB

I wanna get the data from tour images field that has a couple of url for some images.
i wrote a loop to get only the url.

imagesUrlFunction() {
    console.log("array Length");
    console.log(this.tourImages.length);
    let keys = this.tourImages.length;

    for (let n = 0; n < keys; n++) {
      this.tourImagesUrl = this.tourImages[n].guid;

      console.log("imageUrlMedia Var");
      console.log(this.tourImagesUrl);
      // console.log(this.tourImages[n]);
    }
  }

I get this:

46
Screen Shot 2018-07-06 at 20.35.46.png713×198 24.7 KB

my question is i wanna use a ngFor like this but i not getting any data.

 <ion-card *ngFor="let toursM of tourImagesUrl">
      <ion-content>

        <img src="{{toursM.guid}}" />
        <img src="{{toursM}}" />
        <div>{{toursM.ID}}</div>
      </ion-content>
    </ion-card>

But i couldnt get any data it declares that
My urlMedia is
undefined.

so ,

I tried to create a new object like this and adapt the code to it

urlMedia: any = [];
this.urlMedia = this.imagesUrlFunction();

but still the same problem.
I understood that the problem was my knowledge in javascript…
If anyone can help me

Thanks for your time

2

Sort of by definition, one of these has to fail, so you must settle on only one (probably the second). Also, write it like this:

<img [src]="toursM">

HTML5 doesn’t need the ‘/’, and this syntax will work even with sanitized URLs, whereas src="{{foo}}" will fail subtly.

Finally, instead of assigning to tourImagesUrl each time though the loop, I think you want to initialize it to [] and then call push inside that loop instead. That way it will be a proper array that ngFor can work with.

3

Thanks for the reply.
I corrected the html has you advised.
I ve tried what you wrote but the problem still persists.
When you say inicialize the tourImagesUrl you say in the begining making like
tourImagesUrl:any=;

what i understand, the data provided by the loop should go to an object, my tourImagesUrl object.
that should be something like this

tourImagesUrl =[tourImages[0].guid, tourImages[1].guid, tourImages[2].guid,];

but i cant get the data out of the loop into my tourImagesUrl variable.

the .ts code is like this at the moment:

@Component({
  selector: "page-tour-details",
  templateUrl: "tour-details.html"
})
export class TourDetailsPage {
  tours: any = [];
  tourImages: any = [];
  tourImagesUrl = [];
  urlMedia: any = [];
  keyIndex;

  constructor(
    public navCtrl: NavController,
    public navParams: NavParams,
    public modal: ModalController
  ) {}

  ionViewDidLoad() {
    this.tours = this.navParams.data;
    this.urlMedia = this.imagesUrlFunction();
    console.log("_________________________");
    console.log("urlMedia Data");
    console.log(this.urlMedia);
    console.log("Tours Object viewDidLoad");
    console.log(this.tours);
    console.log("keyIndex data");
    console.log(this.keyIndex);
    console.log("_________________________");
  }

  imagesUrlFunction() {
    let keys = this.tourImages.length;
    this.keyIndex = keys;
    for (let n = 0; n < keys; n++) {
      this.tourImagesUrl = this.tourImages[n].guid;
    }
  }
}

and the htm file is

 <ion-card *ngFor="let toursM of urlMedia">
      <ion-card-content>
        <img [src]="toursM">
      </ion-card-content>
    </ion-card>

i getting

42

4

Please stop abusing any and declare return types for all functions. Your code will be easier to understand if you give everything proper types, and that will also help the build tools and your IDE guide you through this.

imagesUrlFunction doesn’t actually return anything, yet you are trying to assign that nothing to urlMedia. A good rule of thumb is that functions should either modify state (object properties) or return something, but not both. You can write this either way, but should choose one.

That decision is pretty much mooted by the fact that interaction with the backend should be done in a service provider, not in the page. The page wants a list of strings, so that’s what I would give it:

interface TourImageSet {
  guid: string;
}

interface TourResponse {
  // bunch of stuff
  tour_images: TourImageSet[];
}

export class TourProvider {
  tourImages(): Observable<string[]> {
    return this._html.get<TourResponse>(api).pipe(
      map(rsp => rsp.tour_images),
      map(isets => isets.map(iset => iset.guid)));
  }
}

export class ToursPage {
  whenever() {
    this._tours.tourImages().subscribe(urls => {
      // urls should be exactly the array of strings we wanted in the first place
    });
  }
}
5

I have a tour provider that i use to get the data with all the tours.
I thought in creating a function in the provider to get the images urls but i only get the images urls when a tour is pushed. thats why i use the imagesUrlFunction their.

When i try to pull the function using provider it gives me an error for the length of my image object.

6

I can’t make head or tail of that. Everything involving getting data belongs in the provider, not the page. That includes getting the URLs, and I would aim to write a function that has the signature above, returning Observable<string[]>. What parameters it needs and what it has to do to interact with the backend is up to you.

7

Thanks rapropos for your time,
i see that i have to learn a little more about data binding to get over this point.
I thought that a simple loop in my page would be enougth since i already have a provider to get the data i have right now in my app, and i can get the urls i need from that provider using the loop i wrote above .

But i quite understand what you are saying, to use a provider to get the any outside data i need into my app.

i tried the code above and couldnt figure out the problem with it or with me :slight_smile: , my map in the pipe isnt “working”.

1 Like