Steps to run a function for updating a JSON data file

Question

Steps to run a function for updating a JSON data file

I currently have a Leaflet map displaying weather data retrieved from a Json source. There is already a function in place that updates the data every x minutes using setInterval.

    setTimeout(function () {
        refreshId = setInterval(function () {

            $.ajax({
                method: 'get',
                dataType: 'text',
                url: 'myURLfile.json',
                success: function (data) {
                    if (data) {
                        markers = [];
                        var withoutMarkers = data.slice(10);
                        markers = JSON.parse(withoutMarkers);
                        //console.log(markers);

                        replaceMarkers(currentFactor);

                    }
                },
                error: function (err) {
                    console.error('there is not date for today.', err)
                }
            })
        }, 300000);
    },10000)

}

Now, I want to be able to trigger this function manually by clicking a button. Something like

        L.easyButton( 'fas fa-cloud-sun-rain', function(){
            myfunction()
        }, 'Refresh', {
            position: 'topright'
        })

However, I'm unsure about what exactly needs to be called to achieve this. Any insights would be greatly appreciated.

javascript json ajax leaflet

Answer 1

Answer №1

To optimize your code, extract the fetching logic from within the setInterval function. Create a new function for fetching data and use it both in the setInterval and when defining your button.

You can implement something similar to this:

function fetchData() {
    $.ajax({
        method: 'get',
        dataType: 'text',
        url: 'myURLfile.json',
        success: function (data) {
            if (data) {
                markers = [];
                var withoutMarkers = data.slice(10);
                markers = JSON.parse(withoutMarkers);

                replaceMarkers(currentFactor);

            }
        },
        error: function (err) {
            console.error('There is no data available for today.', err)
        }
    });
}

// Set up the interval for fetching data
setInterval(fetchData, 300000);

// Set up the button functionality
L.easyButton( 'fas fa-cloud-sun-rain', fetchData, 'Conditions', {
    position: 'topright'
})

Answer 2

To optimize your code, extract the fetching logic from within the setInterval function. Create a new function for fetching data and use it both in the setInterval and when defining your button.

You can implement something similar to this:

function fetchData() {
    $.ajax({
        method: 'get',
        dataType: 'text',
        url: 'myURLfile.json',
        success: function (data) {
            if (data) {
                markers = [];
                var withoutMarkers = data.slice(10);
                markers = JSON.parse(withoutMarkers);

                replaceMarkers(currentFactor);

            }
        },
        error: function (err) {
            console.error('There is no data available for today.', err)
        }
    });
}

// Set up the interval for fetching data
setInterval(fetchData, 300000);

// Set up the button functionality
L.easyButton( 'fas fa-cloud-sun-rain', fetchData, 'Conditions', {
    position: 'topright'
})

Steps to run a function for updating a JSON data file

Answer №1

Similar questions

Steps for sending JSON parameter to asmx web service using $ajax

Swift Parsing JSON

Ruby 1.9.3 causing issues with instant variables not displaying in AJAX response for Rails 3.2.1

Guide on programmatically redirecting a user to a different route

Troubleshooting: Vue.js Component template not displaying items with v-for loop

Error: The variable "$this" has not been defined in the AJAX function

Sharing numerous pictures in a single line using comma-separated pathways

Trouble with Google Interactive Charts failing to load after UpdatePanel refresh

Tips for dynamically updating the id value while iterating through a class

The process of updating the value of an element in local storage with JavaScript

Strange alignment issues occurring solely on certain PCs

How come the date displays as 21/1/2015 instead of 21/1/2015 in Android after parsing the JSON data?

Error message displayed by console when attempting to parse JSON data that is in array

Tips for staying safe from UNLINK security vulnerabilities in PHP

Using Jquery to Connect a Change Event to Child Elements

Adding a class to an element in AngularJS

Enable Parse5's case sensitivity

Shade the entire td column in different colors depending on the characteristics of th

Is there a way to utilize a variable as a key within an object?

Using Highmaps with PHP and JQuery Ajax: Passing a parameter to the current page and retrieving it with PHP