Execute the function only in response to changes in the data

Question

Execute the function only in response to changes in the data

I have a scenario where I am making an ajax call every 3 seconds to keep my app updated with rapidly changing information. However, the expensive function that I run inside the $.done() callback is causing my app to slow down. I want to optimize this process by only running the function if the data returned from the ajax call is different from what I already have in the data object. Can someone suggest the best approach in Vue.js for achieving this?

var app = new Vue({
  data: {
    people : []
  },
  methods: {
    loadPeople() {
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: base_url + 'users/getParticipants2/' + event_id
        }).done(data => {
        //this.people is an array
        //data is an array
        //I only want to do these two things if data is different from what I had in this.people previously
            this.people = data;  
            this.filterPeople();
        });
    }
  }
});

javascript vue.js vuejs2

Answer 1

Answer №1

Vue provides a helpful tool that might be applicable in this situation. Internally, Vue utilizes a function called looseEqual, which can be accessed via _q export and invoked as this._q().

You can make use of this function to only update your property when the new data fetched differs from the existing data. Check out the demo below.

new Vue({
  el: '#app',
  data: {
    people: []
  },
  methods: {
  async fetchPeople() {
    let response = await axios.get('https://jsonplaceholder.typicode.com/users');
      if (this._q(this.people, response.data)) {
        console.log("data didn't change, no need to update");
        return;
      }
      console.log("data changed, updating");
      this.people = response.data;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <button @click="fetchPeople">Fetch People</button>
  <ul>
    <li v-for="p in people">{{ p.name }}</li>
  </ul>
</div>

One downside is that this function is internal (indicated by the _ prefix), so it may undergo changes in the future. Initially, its implementation was:

function looseEqual(o1, o2) {
    return JSON.stringify(o1) === JSON.stringify(o2);
}

In case of any changes, you always have the fallback option to rely on.

Answer 2

Vue provides a helpful tool that might be applicable in this situation. Internally, Vue utilizes a function called looseEqual, which can be accessed via _q export and invoked as this._q().

You can make use of this function to only update your property when the new data fetched differs from the existing data. Check out the demo below.

new Vue({
  el: '#app',
  data: {
    people: []
  },
  methods: {
  async fetchPeople() {
    let response = await axios.get('https://jsonplaceholder.typicode.com/users');
      if (this._q(this.people, response.data)) {
        console.log("data didn't change, no need to update");
        return;
      }
      console.log("data changed, updating");
      this.people = response.data;
    }
  }
})

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">
  <button @click="fetchPeople">Fetch People</button>
  <ul>
    <li v-for="p in people">{{ p.name }}</li>
  </ul>
</div>

One downside is that this function is internal (indicated by the _ prefix), so it may undergo changes in the future. Initially, its implementation was:

function looseEqual(o1, o2) {
    return JSON.stringify(o1) === JSON.stringify(o2);
}

In case of any changes, you always have the fallback option to rely on.

Answer 3

Answer №2

After carefully reviewing your explanation and the coding conventions utilized in the snippet you provided, I have a few key suggestions that may offer some insight.

If the main purpose of your filterPeople() function is to filter and update the view, it's possible that you are approaching this task from the wrong angle.

In the absence of full knowledge regarding the operations of the filterPeople() function, my advice would be to consider defining a vue.js filter if your intention is indeed to conduct a filtering operation. For instance, let's assume you wish to apply the filterPeople filter on the list of participants returned.

Vue.filter('filterPeople', function (newer, older) {
   if (older == newer) {
       return older
    }

    // Otherwise, proceed with filtering and return 'newer' 

 });

var endpoint  = '/users/participants';

new Vue ({
    el: '#app',
    data: {
        participants: null,
        previous: null
    },
    methods:{
        getParticipants: function(){
               this.$http.get(endpoint).then(function(response){
                   this.previous = this.particpants;
                   this.participants = response.data;
                }, 
                function(error){
                  console.log(error.statusText);
                }
              })
          },
          mounted: function () {
            this.getParticipants();
         }
  });

A typical representation within your html might resemble the following example.

<div id="app">
     {participants | filterPeople(previous)}
<div>

This approach is merely a suggested course of action (represented in pseudo code format). Another viable option could involve using a v-if directive to display the binding effects with or without the filter.

Furthermore, there appears to be a discrepancy where you reference a getParticipants endpoint while employing an HTTP post method. Ideally, I would recommend naming the endpoint as /users/participants and utilizing a GET method for retrieving participants, along with a POST method (on the same endpoint) that accepts a JSON request body for participant creation. Naming an endpoint based on an action like getParticipants is less than optimal; instead, endpoints should reflect the resource they pertain to. Web service "methods" typically align more closely with SOAP principles.

Answer 4

After carefully reviewing your explanation and the coding conventions utilized in the snippet you provided, I have a few key suggestions that may offer some insight.

If the main purpose of your filterPeople() function is to filter and update the view, it's possible that you are approaching this task from the wrong angle.

In the absence of full knowledge regarding the operations of the filterPeople() function, my advice would be to consider defining a vue.js filter if your intention is indeed to conduct a filtering operation. For instance, let's assume you wish to apply the filterPeople filter on the list of participants returned.

Vue.filter('filterPeople', function (newer, older) {
   if (older == newer) {
       return older
    }

    // Otherwise, proceed with filtering and return 'newer' 

 });

var endpoint  = '/users/participants';

new Vue ({
    el: '#app',
    data: {
        participants: null,
        previous: null
    },
    methods:{
        getParticipants: function(){
               this.$http.get(endpoint).then(function(response){
                   this.previous = this.particpants;
                   this.participants = response.data;
                }, 
                function(error){
                  console.log(error.statusText);
                }
              })
          },
          mounted: function () {
            this.getParticipants();
         }
  });

A typical representation within your html might resemble the following example.

<div id="app">
     {participants | filterPeople(previous)}
<div>

This approach is merely a suggested course of action (represented in pseudo code format). Another viable option could involve using a v-if directive to display the binding effects with or without the filter.

Furthermore, there appears to be a discrepancy where you reference a getParticipants endpoint while employing an HTTP post method. Ideally, I would recommend naming the endpoint as /users/participants and utilizing a GET method for retrieving participants, along with a POST method (on the same endpoint) that accepts a JSON request body for participant creation. Naming an endpoint based on an action like getParticipants is less than optimal; instead, endpoints should reflect the resource they pertain to. Web service "methods" typically align more closely with SOAP principles.

Execute the function only in response to changes in the data

Answer №1

Answer №2

Similar questions

arrange the elements in an array list alphabetically by name using the lodash library

Error: Vue cannot be created due to lack of permissions

ContainerView: challenges encountered when dynamically inserting views

Disabling a DropDownList in ASP MVC when a checkbox is marked: A step-by-step guide

How to implement server-side rendering in Next.js 14 with GraphQL queries

Erroneous Marker Placement Detected

Encountering issue with Konva/Vue-Konva: receiving a TypeError at client.js line 227 stating that Konva.Layer is not a

Vue-bootstrap spinbutton form with customizable parameters

Is there a way to send an array of objects as parameters in JavaScript?

A guide on updating a boolean field in the database using ajax

Reduce the use of if statements

What is the process for displaying the current bitcoin price on an HTML page using API integration?

Issue with MUI Autocomplete not showing selected name on initial option selection

Sharing the outcome of a $.get request with another function for optimal results

What is the best way to upload an image, pass it to my controller for validation, and finally store it in my database?

What is the method for displaying x-axis dates below a highchart?

Ways to simulate a function that is a part of an internal object

Vuejs v-for nested loops

Using AngularJS to pass the output of a unique filter to another custom filter

PhpStorm 2019.2 introduces Material UI components that have optional props instead of being mandatory