UPDATE
In fact, it falls under subscriptions (according to magazines). It falls into both loadDistances and scrolling ... depending on whether the scrolling initiated the search or just loaded it.
UPDATE
After a closer look at the console output, I realized that the problem is not with my loadDistances function - it is the code that runs when I scroll down and load new items ... it starts automatically. As a workaround for not using ion-infinite-scroll on the same page, I use this code:
let element = this.elRef.nativeElement.querySelector('.scroll-content'); element.addEventListener('scroll', (event) => { var element = event.target; if (element.scrollHeight - element.scrollTop === element.clientHeight) { if(this.distancey.nativeElement.style.display != 'none') { this.doInfiniteD(); } ...
This code repeats over and over after I use Set Location to set the location of the user and then drag it back to the root page, which displays a list of displayed distances. Besides this scenario, the scroll code is never repeated, as it is in itself.
I have this code that loads distances from a database that has already been sorted by firebase functions code (below):
loadDistances() { //return new Promise((resolve, reject) => { let cacheKey = "distances" let arr = []; let mapped; console.log("IN LOADDISTANCES #$$$$$$$$$$$$$$$$$$$$$"); console.log("IN geo get position #$$$$$$$5354554354$$$$$$$"); this.distancelist = this.af.list('/distances/' + this.username, { query: { orderByChild: 'distance', limitToFirst: 10 }}); let x = 0; this.subscription6 = this.distancelist.subscribe(items => { console.log(JSON.stringify(items) + " length - 1 load"); console.log("BEGGINNING STARTATKEY4 WITH DISTANCE: " + this.startAtKey4); items.forEach(item => { let storageRef = firebase.storage().ref().child('/settings/' + item.username + '/profilepicture.png'); storageRef.getDownloadURL().then(url => { console.log(url + "in download url !!!!!!!!!!!!!!!!!!!!!!!!"); item.picURL = url; }).catch((e) => { console.log("in caught url !!!!!!!$$$$$$$!!"); item.picURL = 'assets/blankprof.png'; }); this.distances.push(item); if(x == items.length - 1) { this.startAtKey4 = items[x].distance; } x++; }) }) }
When the application loads, everything works as expected, the code in the subscription happens once and downloads the first 10 according to their distance from the user. The problem is that I have a “Set Location” button on another page that executes the firebase functions code below:
exports.sortDistance = functions.https.onRequest((req, res) => { // Grab the text parameter. var array = req.query.text.split(':'); // Push the new message into the Realtime Database using the Firebase Admin SDK. // Get a database reference to our posts var db = admin.database(); var ref = db.ref("profiles/stylists"); var promises = []; // Attach an asynchronous callback to read the data at our posts reference ref.on("value", function(snapshot) { //console.log(snapshot.val()); var snap = snapshot.val(); for(const user in snap) { promises.push(new Promise(function(resolve, reject) { var snapadd = snap[user].address; console.log(snapadd + " snap user address (((((((())))))))"); if(snapadd != null || typeof snapadd != undefined) { googleMapsClient.geocode({ address: snapadd }).asPromise() .then(response => { console.log(response.json.results[0].geometry.location.lat); console.log(" +++ " + response.json.results[0].geometry.location.lat + ' ' + response.json.results[0].geometry.location.lng + ' ' + array[0] + ' ' + array[1]); var distanceBetween = distance(response.json.results[0].geometry.location.lat, response.json.results[0].geometry.location.lng, array[0], array[1]); console.log(distanceBetween + " distance between spots"); var refList = db.ref("distances/"+array[2]); console.log(snap[user].username + " snap username"); refList.push({ username: snap[user].username, distance: Math.round(distanceBetween * 100) / 100 }) resolve(); }) .catch(err => { console.log(err); reject(err);}) } else { resolve(); } }).catch(err => console.log('error from catch ' + err))); //console.log(typeof user + 'type of'); } var p = Promise.all(promises); console.log(JSON.stringify(p) + " promises logged"); }, function (errorObject) { console.log("The read failed: " + errorObject.code); }); });
I'm sure everything is in order here. It sorts the users according to their distance and creates a list in the database that I see ... and it contains only 30 or so records (there are only 30 or so records in the database). However, after clicking the Set Location button and navigating to the page using loadDistances (the root page) ... it takes a few seconds to return to it ... and then loads hundreds of records. like random order, just repeating what I have in the list in the database, and also loads them out of order ... not sorted (not that I want additional records to be loaded at all).
I see in the console output for loadDistances() that the subscription code starts up again and again after using Set Location. The console output for loadDistances() is at https://pastebin.com/zMZcj9wa .
Why is my code repeated inside the subscription? Does it have anything to do with the subscription while the “Set Locations” sorting happens in the firebase functions code?