JavaScript

1700 readers

42 users here now

founded 1 year ago

MODERATORS

[email protected]

Trying to get and use JSON from a URL (self.javascript)

submitted 1 year ago by TomMasz to c/[email protected]

5 comments fedilink hide all child comments

Absolute JS newbie here. I am able to use fetch() to get JSON from a URL but I can't figure out how to do anything with that JSON outside of the fetch itself.

Here's my code (API key and GPS redacted):

fetch('https://www.airnowapi.org/aq/forecast/latLong/?format=application/json&latitude=X&longitude=X&distance=50&API_KEY=X')
        .then(result => result.json())
        .then((out2) => {     
            console.log('Fetch Output: ', out2);
        }).catch(err => console.error(err));

Any code that references out2 other than console.log() call gives an error that out2 is undefined. How do I get access to out2 anywhere else?

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 4 points 1 year ago* (last edited 1 year ago)

Everything that uses out2 must be scoped in that function where the console.log is. That's because JavaScript is asynchronous: when that entire code block runs, all it does is "queue" the HTTP request to be done, and then continues running your code before the request has even been made. All it knows is that whenever it's done with the HTTP request, it will call the two functions passed in in the then calls, or if it failed, it'll run the function passed into the catch call.

So the code that does whatever with the result must be a separate function to run maybe later when the request completes. Otherwise, this would just freeze the browser or server until it finishes, and it can't do anything else in the meantime!

If you want a more procedural style, you can use async functions and await in it. For example:

try {
    const out = await fetch(...).then(out => out.json())
    // ^ note here that those two `out` variables are completely independent
    console.log('Fetch Output', out)
} catch (err) {
    console.error(err)
}

The same can also be written as this:

try {
    const out = await fetch(...)
    const out2 = out.json()
    console.log('Fetch Output', out)
} catch (err) {
    console.error(err)
}

These two examples are just additional syntax sugar to do the same as with the Promise API in your original code. Internally it splits the code into the same sort of nested functions, but it's easier to read and manage especially if you need to wait on many things.

Of course you need to be in an async context for that:

async function doAsyncStuff() {
    // Do the above stuff
}

doAsyncStuff().catch(err => console.error(err))
// Here again, the actual execution of `doAsyncStuff` will be put in the queue
// to be ran later, there's no escaping that. But the
// code inside the function can make use of the `await` keyword.