0

I've been trying to get web javascript to fetch some dynamic data from a URL and store it in a variable. However, for some reason anything that I return from the then() functions becomes an object promise, even if I wrote "return x;" where x is a string/array/etc..

Here's the code that I currently have. The response from "api/fullGameData" is {"fullGameData":[0,0,0,0,0,0,0,0,0]}

let fullGameData = fetch("api/fullGameData")
.then((response) => {
        if (!response.ok) {
            throw new Error(`HTTP error! Status: ${response.status}`);
        }
        return response.json();
    }
)

fullGameData = fullGameData.then((json) => {
    let fullGameData = json.fullGameData;
    console.log("test= " + fullGameData);
    return fullGameData;
})

console.log("fullGameData= " + fullGameData);

I expected both of the console.logs in there to print the exact same thing, but no matter what I do the console says

fullGameData= [object Promise]
test= 0,0,0,0,0,0,0,0,0

and I have no idea why. I've tried putting other console.logs in other places but it's always the same result, 0,0,0,0,0,0,0,0,0 if the console.log is in one of the .then() functions and [object Promise] otherwise. I really need to use the contents of the fullGameData variable elsewhere so I can't just do everything in the .then functions.

Thanks in advance for any help :)

Kaz_49
  • 1
  • 1
    tl;dr: You cannot. – user202729 Apr 01 '23 at 09:34
  • You can use async await. – kennarddh Apr 01 '23 at 10:20
  • "*Why is returning data from a .then() resulting in an object promise*" - because calling `.then()` always returns a promise. It cannot return the result from the future, the handler has not yet been called, the best you can get is a promise for that eventual result. – Bergi Apr 01 '23 at 11:50
  • "*I really need to use the contents of the `fullGameData` variable elsewhere so I can't just do everything in the .then functions.*" - yes you can. Please show us that code "elsewhere" if you need help with how to access the data. – Bergi Apr 01 '23 at 11:51
  • @Bergi What I have right now to come after is this, it uses Phaser, tileset is statically preloaded `let map = this.add.tilemap({data: mapData, tileWidth: 188, tileHeight: 176});` `let tiles = map.addTilesetImage('tileset');` `let mainLayer = map.createLayer(0,'tiles');` I'm pretty sure there's going to be more lines of code after this once I figure this part out and see that they work, but I don't know what exactly will come next yet. I suppose I could cram everything inside the .then(), but then it'd be an indentation nightmare and just a lot more unreadable so I want to avoid it. – Kaz_49 Apr 01 '23 at 12:46
  • There should be only one level of indentation, no more. It's either in a function that you can just call from the `.then()` callback, or it's in the `.then()` callback itself. Either way, it's impossible to put this code in the top level of a script, since it cannot be executed immediately but needs to wait for the game data to load - but it's not desirable to declare these variables (`map`, `tiles`, `mainlayer`) in the global scope anyway. – Bergi Apr 01 '23 at 13:09
  • I tried the function thing, but then the `this.add.tilemap` broke, presumably because of `this`. I tried async await next and it seems to work now, though. Boy, I really need to get used to promises this is confusing ;) – Kaz_49 Apr 02 '23 at 13:14
  • What is `this`? Is that code already part of a class method or something? – Bergi Apr 02 '23 at 13:22
  • I'm not exactly sure, I'm writing the code inside a framework and I just know that I should use `this`, I don't know what's going on under the hood. You can look it up if you're interested ig, it's phaser.io :) – Kaz_49 Apr 04 '23 at 12:53
  • Doesn't matter what framework this is, just what the surrounding lexical structure is. A class method? A function declaration? An arrow function? Top level of the module? – Bergi Apr 04 '23 at 13:45
  • I'm fairly certain it's a class method, but honestly I have no idea. :| Would you like to look at the entire script? – Kaz_49 Apr 06 '23 at 06:44

0 Answers0