run a nested function on button click

Question

I have a fetch API that fetches a response from the backend and I have a function inside the fetch that alerts the response. What I am trying to do is run the function on click of a button but the test function is not on the global scope so my button can't access it to run it. Is there any way I can run the function to alert the response on button click after getting the response? Any help is appreciated. Thanks in advance.

fetch(`http://localhost:PORT/api/ROUTE`)
  .then(res => res.json())
  .then((response) => {

    function test() {
      alert(response)
    }
  })

<button onclick="test()">CLICK ME</button>

try to use javascript promise

Joji
– Joji

2021-06-04 05:54:17 +00:00
Commented Jun 4, 2021 at 5:54 — Joji
– Joji, Commented Jun 4, 2021 at 5:54

trincot · Accepted Answer · 2021-06-04 06:01:37Z

1

Note that in your current code, test is not even called by the then callback. Move that function into the global scope, but be aware that anyway if you click too soon, the response might not be available yet. So work with the promise:

let promise = fetch(`http://localhost:PORT/api/ROUTE`)
              .then(res => res.json());
test(); // Optional -- if you want to have the alert even when button is not clicked.

function test() {
   promise.then(response => alert(response));
}

If your purpose was to redo the fetch on every button click, then move all that logic inside test.

test(); // Optional -- when you want to initiate the fetch on page load

function test() {
   fetch(`http://localhost:PORT/api/ROUTE`)
       .then(res => res.json());
       .then(response => alert(response));
}

edited Jun 4, 2021 at 6:01

answered Jun 4, 2021 at 5:56

trincot

357k38 gold badges282 silver badges339 bronze badges

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

Comments

Tarik · Accepted Answer · 2021-06-04 05:56:34Z

0

If you want to show the alert after fetch completion:

function getdata() {
    fetch(`http://localhost:PORT/api/ROUTE`)
      .then(res => res.json())
      .then((response) => {

        function test() {
          alert(response)
        }
      })
}

<button onclick="getdata()">CLICK ME</button>

getdata is called and fetch initiated. Upon fetch completion, test is called. Note that you can do multiple clicks and have fetches running in parallel.

answered Jun 4, 2021 at 5:56

Tarik

11.2k2 gold badges31 silver badges48 bronze badges

Comments

TechySharnav · Accepted Answer · 2021-06-04 06:00:44Z

0

You need to declare a variable in global scope, and assign a function to it upon fetching the data.

var test;

fetch(`https://api.github.com/users/techysharnav/repos`)  //For Test purposes
  .then(res => res.json())
  .then((response) => {
     test = (response)=>alert(response)
  })

<button onclick="test()">CLICK ME</button>

answered Jun 4, 2021 at 6:00

TechySharnav

5,1142 gold badges13 silver badges29 bronze badges

Collectives™ on Stack Overflow

run a nested function on button click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related