CODEWITHSUNDEEP
angularionic-frameworkionic4
Dinuka Wanasinghe
Dinuka Wanasinghe

Reputation: 775

How to auto update data on ionic list without refreshing the page

I created a page that contains ionic list and there was two buttons if clicking on that button it call a firebase api and it get updated. ones it updates, whole list get refresh. How to stop refresh of whole list.

enter image description here

 onLocationDataUpdate() {
    // Get current location
    this.geolocation.getCurrentPosition().then(position => {
      this.location.lat = position.coords.latitude;
      this.location.lng = position.coords.longitude;

      // Get location data from Firebase
      this.connectivityServiceService.getLocations(
        this.locatingRange,
        this.location.lat,
        this.location.lng
      );

      // Bind data to Ionic list
      this.dataSetSubscription = this.connectivityServiceService.geoPointLocationUpdateNotify.subscribe(
        locations => {
          const locationData = this.connectivityServiceService.getGeoPointLocations();
          if (locationData.length > this.maxDataCount) {
            const tempLocationData = locationData.slice(0, this.maxDataCount);
            tempLocationData.forEach(item => {
              if (item.feed_back === undefined) {
                item = Object.assign(item, {
                  feed_back: { count: 0, positive: [], negative: [] }
                });
              }
            });
            this.geoPointLocationData = tempLocationData;
            this.loader.dismiss();
          } else {
            const tempLocationData = locationData;
            tempLocationData.forEach(item => {
              if (item.feed_back === undefined) {
                item = Object.assign(item, {
                  feed_back: { count: 0, positive: [], negative: [] }
                });
              }
            });
            this.geoPointLocationData = tempLocationData;
            this.loader.dismiss();
          }
        }
      );
    });
  }

Upvotes: 1

Views: 2481

Answers (1)

rtpHarry
rtpHarry

Reputation: 13125

I know you have resolved this to your satisfaction but you did actually hit on something here.

By just pushing new data to the model you are going to see it update but under the hood it is recreating that whole list.

If the data gets long then this could give you performance issues. At this point you should look into trackBy.

It's a method of giving Angular a way to track each individual item in the list so that when it comes to updating it, Angular can figure out which ones actually need to be updated and only change them.

This seems like a decent introduction to the topic.

Upvotes: 1

Related Questions