0

So, I am fetching a JSON from a URL and have it in a response then. In the section where my response/data is read, I would like to use a return. I need to do so, because I am making a module for "Magic Mirror" and in order to do so, you have to create a element and then return it so that it gets displayed to the main page. Well, as already said, I fetch the data, like to read it, assign the fetched JSON data to a element and then that one has to be returned. But I am unsure if it is even possible to use a return inside a fetch response. If not, how would I go about this? Maybe something like a global variable or are there simpler/other things?

This is my code

Module.register("test",{
// Default module config.
defaults: {
},

getData: function() {

    function foo() {
     return fetch("http://transport.opendata.ch/v1/connectionsfrom=Watt, 
     Dorf&to=Regensdorf Watt,Bahnhof&limit=2&transportations=bus&direct=1")
     .then(function(response) {
         return response.json();
        })
    };

    foo().then(function(response){
        msg = data.connections[0].from.station.name;
        var wrapper = document.createElement("h1");
        wrapper.innerHTML = msg;
        return wrapper;
    });
    }
});

Thanks, in advance.

rexsurrection
  • 5
  • 4
  • If this "Magic Mirror" supports asynchronous responses, you can return the promise (put `return` in front of `fetch` as well). If it doesn't, then you are out of luck because there is no way for you to make the outer code wait for yours – CherryDT Apr 02 '20 at 12:49
  • Hey @CherryDT. I am not sure, if I have misunderstood something, but am I not already using a promise in my code above with "then"? Because it seems as if I still cant use a "return" inside my response. – rexsurrection Apr 02 '20 at 18:00
  • This question was marked as a duplicate, but it isnt what I am looking for. I am already able to get the results of my response, its just I am not able to have a `createElement` and then `return` it, within my `.then` response. – rexsurrection Apr 02 '20 at 18:02
  • I think you misunderstand. The promise that `fetch` is returning is not returned to the caller of `getDom`. Hence why I said above, if the caller knows how to deal with that, just return it, otherwise it's a more problematic issue – CherryDT Apr 02 '20 at 19:03
  • Well, I tried it this way, but wasnt able to get it to work. – rexsurrection Apr 02 '20 at 19:36
  • Hey, I updated the code above to what I came up with, I am not sure, if this is how its supposed to be or if I just restructered the code. – rexsurrection Apr 02 '20 at 19:49
  • I'm confused what you did there. You are _still_ not returning the promise. Example: `getData: function () { return fetch(...).then(() => ...).then(() => ...) }` – CherryDT Apr 02 '20 at 20:38
  • Anyway I checked the documentation of Magic Mirror for you and it cannot wait on asynchronous functions anyway. (Which makes sense because what would be displayed in between?) So I think you should return your DOM in `getDom`, keep state, initiate loading, call `updateDom` when it is finished and make sure that `getDom` would then return the updated data instead. – CherryDT Apr 02 '20 at 20:40
  • Check one of the many existing modules [here](https://github.com/MichMich/MagicMirror/wiki/3rd-party-modules#weather), you'll see that the recurring pattern is that in `getDom` it checks whether data is loaded or not, if yes then it shows the data, if not then it shows a loader. It stores the data outside of the function. It has a backend update function which sends a socket notification, and on the socket notification handler it calls `updateDom` after saving the data for use by `getDom`. – CherryDT Apr 02 '20 at 20:45

0 Answers0