Updating XML Data in Real-Time with jQuery.get

Question

I’m building a page that has a carousel (with bootstrap 4) that displays some information about temperatures. This information comes from a XML that will be updated whenever any change occurs.

I’m doing the tests by changing the file XML manually, but I can’t see the changes. I’ve tried setTimeout and the setInterval (the setInterval repeats the whole block HTML) and not being able to visualize the changes, it seems that in the case of setTimeout, he does not carry the XML again.

Could someone help me unravel this mystery? I thank you in advance for your attention :)

Code:

function temperatures() {
    'use strict';
    $.get('temperature.xml', function (data) {
        $(data).find('temperature').each(function () {
            let $temperature = $(this);
            let type = $temperature.find('type').text();
            let value = $temperature.find('value').text();

            let temperatures = '<div class="carousel-item temperature">';
            temperatures += '<span class="sensor-value">' + value + '</span>';
            temperatures += '<span class="sensor-title">' + type + '</span>';
            temperatures += '</div>';

            $('.temperatures').append($(temperatures));
        });
    });
    setTimeout(temperatures, 1000);
}

$(function () {
    temperatures();
});

Answer 1

setTimeout serves as a "pause", it runs only once, in the programmed time. Already the setInterval, it creates an interval that will be repeated endlessly (or until you use the command clearInterval()).

Since you only want the new results (and do not repeat them), it is necessary to create a ID unique to each value. This way you can check, through the ID, if the value is new or repeated.

Example:

<div class="temperatures"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script>
    function temperatures() {
        'use strict';
        $.get('xml.xml', function (data) {
            $(data).find('temperature').each(function () {
                let $temperature = $(this);
                let type = $temperature.find('type').text();
                let value = $temperature.find('value').text();

                /* Converte para base64 e remove o sinal de igual */
                let id = btoa(value).replace(/=/g, "")

                /**
                 * Verifica se a div com o ID já existe,
                 * caso já exista, ignora. Caso contrário,
                 * adiciona na tela.
                 */
                if (! $("div#"+id).length ) {
                    let html = '<div class="carousel-item temperature" id="' + id + '">';
                    html += '<span class="sensor-value">' + value + '</span>';
                    html += '<span class="sensor-title">' + type + '</span>';
                    html += '</div>';

                    $('.temperatures').append( html );
                }
            });
        }).done( function() {
            setTimeout( temperatures, 1000 )
        } );
    }

    setTimeout(temperatures, 1000)
</script>

Sample Xml:

<temperature>
    <type>Tipo</type>
    <value>Valor</value>
</temperature>

You can use various ways to create a ID. Can be converted to hexadecimal, Base64; using bitwise, md5, sha1; concatenating the guy with the value; add in a array and carry out the checks with the method Array.find or Array.indexOf etc..