When I retrieve items from a database for a feed, it is crucial that they remain in the same order as retrieved. However, despite mapping the array from the query, the displayed feed objects end up out of sequence. Here's the snippet of code:
let cacheKey = 'promos';
let promises_array:Array<any> = [];
let mapped;
this.cache.removeItem(cacheKey);
this.cache.getItem(cacheKey).catch(() => {
let store = [];
this.list2 = this.af.list('/promos', {
query: {
limitToLast: 10
}});
this.subscription4 = this.list2.subscribe(items => {
mapped = items.map((item) => {
return new Promise((resolve,reject) => {
let storageRef = firebase.storage().ref().child('/settings/' + item.customMetadata.username + '/profilepicture.png');
storageRef.getDownloadURL().then(url => {
console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!");
item.customMetadata.picURL = url;
store.push(item.customMetadata);
resolve();
}).catch((e) => {
console.log("in caught url !!!!!!!$$$$$$$!!");
item.customMetadata.picURL = 'assets/blankprof.png';
store.push(item.customMetadata);
resolve();
});
})
})
console.log(JSON.stringify(mapped) + " mappped things");
this.startAtKey = items[0].$key;
this.lastKey = this.startAtKey;
let results = Promise.all(mapped);
results.then(() => {
//setTimeout(() => {
this.items = store.reverse();
//this.classesListArray.reverse();
console.log(JSON.stringify(this.items) + " value value vlaue items");
return this.cache.saveItem(cacheKey, this.items);
//}, 3000);
})
})
}).then(data => {
this.items = data;
})
I suspect that the images load at varying speeds each time, causing them to be arranged out of order during mapping due to their loading times. Another concern is whether the returned data from the request is an actual array. When checking typeof items within the subscription, it shows as object, yet JSON.stringify displays an array structure - could this discrepancy be responsible for the loss of order? Is it possible that it's not really an array?