How can I pass json data returned from a Fetch function to another function?

Question

I want a use Fetch() or Jquery GetJson() to fetch some json data (json file) every 5 seconds independently.

I want another function to use that data and display an array of names choosing 8 at a time (out of 100 or so names) in a loop. (still to be implemented)

How do I go about waiting for the data? I know I need to wait for the data to return asynchronously.

var data = null;
var dataPath = "../data/GolfData.json";

$(document).ready(function () {
  console.log('working...');
  DisplayData(data);
});


/* Fetch Data
------------------------------------------  */
function FetchData() {
  fetch(dataPath)
    .then(function (response) {
      return response.json();
    })
    .then(function (json) {
      data = json;
      console.log(data)
      return data;
    })
    .catch(function (error) {
      setInterval(FetchData, 5000);
      console.log(error);
    })
}
FetchData();
setInterval(FetchData, 5000);

function DisplayData(data) {
 console.log('data ', data);
}

Console: data null

Put your `DisplayData` function in a `.then`. `fetch(dataPath).then(...).then(...).then(DisplayData)` — ktilcu, Jul 22 '19 at 14:09
@ktilcu but then that would bean that DisplayData(data) is also called every 5 seconds. correct? I want to avoid that. — Zinox, Jul 22 '19 at 14:15
Yes it would. So you want to fetch the data every 5 secs, store it somewhere and then display the most recent data at some later point? — ktilcu, Jul 22 '19 at 14:17
@nbokmans, not sure if I would classify this as a duplicate, the other question is more generally about async requests, but not about how to do them periodically etc... — exside, Jul 22 '19 at 14:46
@Zinox `let dataCache = Promise.resolve(); ... setInterval(() => dataCache = FetchData(), 5000); const DisplayData = () => dataCache.then(console.log)` — ktilcu, Jul 22 '19 at 15:59

score 0 · Answer 1 · answered Jul 22 '19 at 14:39

Something in this direction might help. The example below just executes a request to a URL each 5 seconds, forever =)... what you then do when the data comes back is up to you. If you don't want the DisplayData() function to run each 5 seconds you would have to implement some kind of conditional logic which let's the code decide if DisplayData() should run or not...

// Not declared `async` because it returns a promise already
function wait(ms) {
  // Returns a promise that we can `await`
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      console.log(`Waiting for ${ms}ms`);
      // Resolve the promise with the timeout value,
      // not really important here with what it is resolved
      resolve(ms);
    }, ms);
  });
}


async function getData() {
  try {
    // GET some data from whereever
    let response = await fetch('https://randomuser.me/api/?inc=gender,name,nat&results=10');

    let data = await response.json();
    
    return data;
  } catch(err) {
    console.log(err);
    return null;
  }
}

// IIFE to use `await` at the top level
(async function() {
  // this is an infinite loop, for developing you might want
  // a way to stop it, can crash your browser if you mess
  // it up inside =)...
  while (true) {
    console.log('getting data...');
    let data = await getData();
    console.log(data);
    
    // here you do something with the new data...
    // e.g. call your `DisplayData(data)` function
    
    // then wait for 5 seconds
    await wait(5000);
  }
})();

How can I pass json data returned from a Fetch function to another function?

1 Answers1