Magic Mirror Alert from inside function

Question

I want to display a notification every time the interval runs. I get this error message:

Uncaught TypeError: this.sendNotification is not a function at OV.js:40

I think is thas something to do with where I place it because if I place it outside the interval function it does work. Maybe someone can point me in the right direction.

Module.register("OV",{
    // Default module config.
    defaults: {
        text: "Openbaar Vervoer!"
    },

    // Override dom generator.
    getDom: function() {
        var wrapper = document.createElement("div");

        function updateOV() {
        this.sendUpdate;
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
            var string = "";
            //console.log(this.responseText);
            var data = JSON.parse(this.responseText);
            //console.log(decodeURI(data.dest));
            string += "<table>";
            $.each(data, function( index, value ) {
                string += "<tr>"
                console.log(value );
                string += "<td>" + value.service + "</td>";
                string += "<td>" + decodeURI(value.dest) + "</td>";
                string += "<td>" + value.time + "</td>";
                string += "<td>" + value.state + "</td>";
                string += "</tr>";
            });
            string += "</table>";
            wrapper.innerHTML = string;
            }
          };
          xhttp.open("GET", "http://192.168.1.167/esp/bustijden.php");
          xhttp.send();
        }

        setInterval(function() {
            updateOV();
            this.sendNotification("SHOW_ALERT", {title: "OV", message: "Bustijden ge-update.", timer: "1000"});
        }, 10000);
        updateOV();

        return wrapper;
    },

    getScripts: function() {
    return [
        'https://code.jquery.com/jquery-2.2.3.min.js',  // this file will be loaded from the jquery servers.
    ]
    },

});

https://github.com/MichMich/MagicMirror/tree/master/modules/default/alert https://github.com/MichMich/MagicMirror

Abdennour TOUMI · Answer 1 · 2017-05-08T17:42:41.530

1

To keep the scope this, use arrow function () => {} instead the simple function function(){}

Then , instead of :

    setInterval(function() {
        updateOV();
        this.sendNotification("SHOW_ALERT", {title: "OV", message: "Bustijden ge-update.", timer: "1000"});
    }, 10000);

You will have:

    setInterval(() =>  {
        updateOV();
        this.sendNotification("SHOW_ALERT", {title: "OV", message: "Bustijden ge-update.", timer: "1000"});
    }, 10000);

Alternatively :

Keep the simple function , but you have to save the this outside the function before :

    const that = this;
    setInterval(function() {
        updateOV();
        that.sendNotification("SHOW_ALERT", {title: "OV", message: "Bustijden ge-update.", timer: "1000"});
    }, 10000);

Nevertheless, we recommend the arrow function.

edited May 08 '17 at 17:42

answered May 08 '17 at 15:00

Abdennour TOUMI

87,526
38
249
254

Thank you that worked. But what if I want to acces this.config.default in a function for example the xhttp.onreadystatechange = function() {}; Making it xhttp.onreadystatechange = () => {}; didn't work. – Luukth May 08 '17 at 16:33
See my update to answer which is after '...Alternatively ,....' . It might be helpful for `onreadystatechange ` – Abdennour TOUMI May 08 '17 at 17:42

Magic Mirror Alert from inside function

1 Answers1

Alternatively :