Hi,
Currently I have an app that was made using ionic 3, which was updated over a year ago.
Today we wanted to push a new update to the app.
We’ve updated some angular stuff and now there are loads of deprecated functions that we have replaced.
In the browser when I run ionic serve. All of the information is being displayed from the observables that are returned.
However in android, this information doesn’t want to display in the UI.
I’ve setup a LOT of debug messages to see what is being shown.
The following function should return an observable that can be subscribed to and then displays data.
A console log inside the subscribe of this function (other page) doesn’t show up.
The following console logs inside of this function are like followed:
res: shows all of the responses correctly.
response: shows the current blob of an image correctly.
nieuws1: doesn’t show up.
finish1: shows a observable.
nieuws2: doesn’t show up.
finish2: doesn’t show up.
nieuws3: shows an empty variable with 0 length.
Observables: shows all of the observables corresponding to res (same amount).
“Gets Here”: doesn’t show up.
nieuws4: doesn’t show up.
result: shows an observable.
getNieuwsPlaats(plaats) {
return observableFrom(this.connection.magDataOphalen().then((waarde) => {
let body = new FormData();
body.append('actie', 'nieuws');
body.append('plaats', plaats);
if (waarde) {
return this.http.post(Globals.api, body).pipe(mergeMap((res:any[]) => {
console.log(res);
let nieuws:Nieuwsbericht[] = new Array();
let Observables:Observable<any>[] = new Array();
let finish:Observable<any>;
if (res.length != 0) {
for (var i = 0; i < res.length; i++) {
if (res[i].Prioriteit == "0") {
res[i].Prioriteit = false;
}
else {
res[i].Prioriteit = true;
}
let temp = res[i];
if (res[i].Afbeelding) {
Observables.push(this.storage.getImage(Globals.host + res[i].Afbeelding).pipe(mergeMap( response =>{
console.log(response);
var blob = response;
var reader = new FileReader();
reader.readAsDataURL(blob);
let file;
finish = new Observable((observer) => {
reader.onloadend = () => {
file = reader.result;
nieuws.push(new Nieuwsbericht(temp.Datum, temp.Onderwerp, temp.Bericht, temp.Afdeling, file, temp.Prioriteit));
console.log(nieuws1);
observer.next(nieuws);
observer.complete();
}
});
console.log(finish1);
return finish;
})));
}
else {
finish = new Observable((observer) => {
nieuws.push(new Nieuwsbericht(temp.Datum, temp.Onderwerp, temp.Bericht, temp.Afdeling, '', temp.Prioriteit));
console.log(nieuws2);
observer.next(nieuws);
observer.complete();
});
console.log(finish2);
Observables.push(finish);
}
}
console.log(nieuws3);
console.log(Observables);
return observableForkJoin(Observables).pipe(map(() => {
console.log("Gets here");
nieuws.sort(function(a, b){
let d1 = moment(a.datum);
let d2 = moment(b.datum);
if (d1 > d2) return -1;
if (d1 < d2) return 1;
return 0;
});
nieuws.forEach(function(bericht) {
let newDatum = moment(bericht.datum);
bericht.datum = newDatum.format('DD-MM-YYYY HH:mm').toString();
});
this.storage.isReady().then(() => {
this.storage.storeItem('nieuws-' + plaats, nieuws);
});
console.log(nieuws4);
return nieuws;
}));
}
else {
let result:Observable<any>;
result = new Observable((observer) => {
observer.next("Er is geen data aanwezig.");
observer.complete();
});
return result;
}
}));
}
else {
let result:Observable<any>;
result = new Observable((observer) => {
this.storage.isReady().then(() => {
let data = this.storage.getItem('nieuws-' + plaats);
data.then(value => {
observer.next(value);
observer.complete();
});
});
});
return result;
}
})).pipe(mergeMap((result) => {
console.log(result);
return result;
}));
}
I have this problem with all of my information inside of my app (different functions), and apparently this only happens with information that has images to download.
When I look in the network tab, I’m getting 200 OK’s but I’m not seeing the blobs coming up.
All of the console logs do show up in the browser when I use ionic serve.