Http Requests on ionic

Question

Http Requests on ionic

Navigation

#1 by (1 votes)

0

I want to show a list of products by calling an api that the json returns to me. but to me it seems the answer arrives somewhat late, after the app starts and I guess that's why I do not get painted .-

My request code:

getPromociones(){

      var url = "x";

      return this.http.get(url).subscribe(
         (data)=>{
            this.data = data['Promociones'];            
            for(var i = 0; i <this.data.length; i++){
                  //console.log('contador'+ i +' '+JSON.stringify(this.data[i]['Titulo']));
                  this.itemsdata[i] = {
                     "id":this.data[i]['IdPromocion'],
                     "title":this.data[i]['Titulo'],
                     "description":this.data[i]['Descripcion'],
                     "image":this.data[i]['Url'],
                     "imageAlt":"avatar",
                     "icon":"icon-heart-outline",
                     "duration":"3:42"
                  }
            }

            this.data2={
               "headerImage":"assets/images/background/14.jpg",
                        "toolBarTitle":"Player",
                        "title":"Promociones",
                        "iconLike":"icon-thumb-up",
                        "iconFavorite":"icon-heart",
                        "iconShare":"icon-share-variant",
                        "iconCar":"icon-cart-arrow-down",
                        "iconCarPlus":"icon-cart-plus",
                        "iconSkipPrevious":"icon-skip-previous",
                        "iconPlay":"icon-play",
                        "iconSkipNext":"icon-skip-next",
                        "items":this.itemsdata
            };

            this.getDataForLayout1(this.data2);
         },error=>{
            console.error("error en la peticione");
         });

    }



    getDataForLayout1 = (data): any => {
         console.log('json '+JSON.stringify(data));
         return data;
}

the first time it arrives like this:

json undefined

and seconds later if it arrives it shows it in the console but not in the list of the app. it arrives like this:

json {"headerImage":"assets/images/background/14.jpg","toolBarTitle":"Player","title":"Promociones","iconLike":"icon-thumb-up","iconFavorite":"icon-heart","iconShare":"icon-share-variant","iconCar":"icon-cart-arrow-down","iconCarPlus":"icon-cart-plus","iconSkipPrevious":"icon-skip-previous","iconPlay":"icon-play","iconSkipNext":"icon-skip-next","items":[{"id":61,"title":"ASEPXIA CONTROL PUNTOS NEGROS","description":"30% Descuento Precio Sugerido $99,90","image":"https://fefara.blob.core.windows.net:443/tds-demo/promociones/Promociones Julio-24.jpg","imageAlt":"avatar","icon":"icon-heart-outline","duration":"3:42"},{"id":62,"title":"BENGUE SIN OLOR 35 GR GEL","description":"30% Descuento Precio Sugerido $129","image":"https://fefara.blob.core.windows.net:443/tds-demo/promociones/Promociones Julio-30.jpg","imageAlt":"avatar","icon":"icon-heart-outline","duration":"3:42"},{"id":63,"title":"CICATRICURE ARRUGAS 60 GR CRE","description":"30% Descuento Precio Sugerido $268","image":"https://fefara.blob.core.windows.net:443/tds-demo/promociones/Promociones Julio-26.jpg","imageAlt":"avatar","icon":"icon-heart-outline","duration":"3:42"},{"id":64,"title":"DERMAGLOS CREMA 200 GR.","description":"30% Desc. Precio Sugerido $340","image":"https://fefara.blob.core.windows.net:443/tds-demo/promociones/Promociones Julio-36.jpg","imageAlt":"avatar","icon":"icon-heart-outline","duration":"3:42"},{"id":65,"title":"Promo sin grupo!","description":"promo","image":"https://fefara.blob.core.windows.net:443/tds-demo/promociones/Imagen no disponible.jpg","imageAlt":"avatar","icon":"icon-heart-outline","duration":"3:42"}]}

api ionic3

asked by developer 06.03.2018 в 15:17

source

1 answer

validate several input that its value is greater than 10 (mask) It is possible to print this with "for" or some other way

score 1 · Accepted Answer

You have to use a promise , this is a block of code that when called (asynchronously) returns a confirmation or an error. You can read more about the promises in javascript (also valid for typescript with ionic 3) in the following link: link

Going back to your example you should do something like this:

getPromociones(){
    return new Promise((resolve, reject) => {
      this.http.get(url).subscribe(res => {
         resolve(res); //devolvemos la respuesta de la llamada http
      }, (err) => {
         reject(err); //devolvemos el error si se diera
      });             
    })
}

and the call to the method would be something like this:

getPromociones().then(
    res => {
      console.log(res);
    },
    err => {
      console.log(err);
    }
);