How can I add a spinner in Javascript while fetch async is loading my data?

Question

Good morning, I have a fetch async function in my js file for call ajax members into a goverment table. I want to add a spinner while the data is been loading and also I want to hide the table titles and the dropdown menu as well as checkboxes while the spinner (ajax) is working. I´m not using any framework, just js vanilla. I´m a student and I can´t use jquery for this. I have the spinner but it doesn´t disapear when the data appears on the table. Thank you so much!

async function getData(chamber) {
  members = await fetch(`https://api.propublica.org/congress/v1/113/${chamber}/members.json`, {
      method: "GET",
      headers: new Headers({
        'X-API-Key': 'iv8LMc9T9sQKOc0EfDC1NLtQU68pFsF6O6W3NPJz'
      })
    })

    .then(response => response.json())
    .then(data => data.results[0].members)
    .catch(err => console.log(err))
  webLogic(chamber);
  document.getElementsById("loader").style.display = "none"
}

And how can I put that into a fetch await function with js syntax? — Nikita99, Feb 07 '20 at 14:14
either use `async / await` or use `.then()` https://stackoverflow.com/questions/48506445/how-to-return-an-ajax-result-using-async-await/48506500#48506500 — messerbill, Feb 07 '20 at 14:16

score 5 · Answer 1 · answered Feb 07 '20 at 11:37

5

You can achieve this by setting innerHTML of your element - note that the setTimeout is just used to "mock" your async request here. Of course you'd need something like

.then((resolvedData) => document.getElementById('myDiv').innerHTML = resolvedData)

here the snippet:

document.getElementById('load').addEventListener('click', function () {
  document.getElementById('content').innerHTML = '...'
  setTimeout(function () {
    document.getElementById('content').innerHTML = 'content loaded!'
  }, 2000)
})

<div id="content"></div>
<button id="load">load</button>

answered Feb 07 '20 at 11:37

messerbill

5,499
1
27
38

Sorry, I don´t understand. – Nikita99 Feb 07 '20 at 14:11
The first line of code works but it shows the title of the table and then disapear – Nikita99 Feb 07 '20 at 14:12
what do you not understand? The relevant part is `document.getElementById('content').innerHTML = 'content loaded!'` which has to be executed once the request was resolved. - and of course the `innerHTML` should be the spinner **before** the promise was resolved – messerbill Feb 07 '20 at 14:20

How can I add a spinner in Javascript while fetch async is loading my data?

1 Answers1