Accessing a JSON array element outside of a Javascript async function

Question

I have the following script:

async function getJobs () {
    const response = await fetch('https://redhat.jobs/jobs/feed/json');
    json = await response.json();
    console.log("inside getJobs fuction " + json);
}

jobs = getJobs();
console.log("outside getJobs function" + jobs);

The first console.log displays the json response as I would expect. However, with the 2nd log I see outside getJobs function[object Promise] in the console.

I think what is happening here is that I need to wait for getJobs to run/complete before assigning the results to the jobs variable? Or is my approach this entirely wrong to begin with.

Just to give more context, I want getJobs to once, then I want to do stuff with the jobs array in the app.

Possible duplicate of How do I return the response from an asynchronous call? — Liam
– Liam, Commented May 18, 2018 at 14:26
Should you be returning a value from your function I.e. return json; ? — mshirlaw
– mshirlaw, Commented May 18, 2018 at 14:33

jmkmay · Accepted Answer · 2018-05-18 15:25:23Z

2

fetch(url) and response.json() both return a Promise. What you can do with Promises is use a .then() statement. This allows you to execute some code once the Promise has been resolved. With regards to your above code, you'll notice if you run it as is, you get:

"outside getJobs function[object Promise]"
"inside getJobs fuction [object Object], [object Object], ..."

This is because getJobs() returns a Promise. So:

jobs = getJobs();
console.log("outside getJobs function" + jobs);

Executes console.log() immediately after it recieves a Promise from getJobs(). It's only when that Promise is resolved that you'll get anything useful, so you want to make sure you're calling console.log() only once the Promise has been resolved.

You can do this by using a .then() statement. Learn more about them here. This allows you to treat this code synchronously. You don't even have to worry about making getJobs() async (this can make code slightly more confusing when Promise chaining does the job just fine in my opinion). I would implement above like this:

function getJobs() {
    var result = fetch('https://redhat.jobs/jobs/feed/json');
    console.log('result inside getJobs is a Promise')
    return(result)
}

getJobs().then(function(response){
  return response.json();
  })
  .then(function(jobs){
  console.log('result after promise chain is ' + jobs)
  }
);

answered May 18, 2018 at 15:25

jmkmay

1,51612 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Mark Locklear Over a year ago

Great answer, however, this is still not really getting at my question. I want a jobs array available outside of any function. So something like: gist.github.com/marklocklear/bd0116ff14e266310864e456271a9921. Note I am wanting a jobs array/variable that contains the json output that is outside any other function.

jmkmay Over a year ago

No problem. You can actually just set jobs = getJobs().then().then(). Your jobs variable will update each time the promise is resolved. You will just have to be aware that until both Promsies are resolved, jobs will be a Promise object and may need to check it's type before actually using it.

Scott Picquerey · Accepted Answer · 2018-05-18 14:50:05Z

0

You need to create another async function in which you call getJobs() with await. The reason you have outside getJobs function[object Promise] is because the console.log is ran before the promise being resolved.

Doing it this way will fix your issue :

async function run(){
  async function getJobs () {
      const response = await fetch('https://redhat.jobs/jobs/feed/json');
      json = await response.json();
      return(json);
  }

  jobs = await getJobs();
  console.log(jobs);
 }
 
 run();

answered May 18, 2018 at 14:50

Scott Picquerey

747 bronze badges

1 Comment

Mark Locklear Over a year ago

I want jobs to be available outside the function. Again, this may be a JS thing and not possible.

Collectives™ on Stack Overflow

Accessing a JSON array element outside of a Javascript async function

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related