Fetch API in sync functions and for loop

Question

var lineArr = [];
    var MAX_LENGTH = 10;
    var duration = 500;
    var chart = realTimeLineChart();

function getData() {
  fetch('./getRealTimeData').then((response) => response.json()
.then((data) => {
  return data;
}));
}

function seedData() {
  var now = new Date();
  for (var i = 0; i < MAX_LENGTH; ++i) {
    let data = getData();
    lineArr.push({
      time: new Date(now.getTime() - ((MAX_LENGTH - i) * duration)),
      x: data.x,
      y: data.y,
      z: data.z
    });
  }
}

function updateData() {
  var now = new Date();
  let data = getData();

  var lineData = {
    time: now,
    x: data.x,
    y: data.y,
    z: data.z
  };
  lineArr.push(lineData);

  if (lineArr.length > 30) {
    lineArr.shift();
  }
  d3.select("#chart").datum(lineArr).call(chart);
}

function resize() {
  if (d3.select("#chart svg").empty()) {
    return;
  }
  chart.width(+d3.select("#chart").style("width").replace(/(px)/g, ""));
  d3.select("#chart").call(chart);
}

document.addEventListener("DOMContentLoaded", function() {
  seedData();
  window.setInterval(updateData, 250);
  d3.select("#chart").datum(lineArr).call(chart);
  d3.select(window).on('resize', resize);
});

result:

rt_st.js:19 Uncaught TypeError: Cannot read property 'x' of undefined
    at seedData (rt_st.js:19)
    at HTMLDocument.<anonymous> (rt_st.js:53)

Because fetch is async it can have many problems to use in sync context, an don't understand how I can make this getData() function waiting while a request to the server is executed? Or what can I use instead fetch? Or I should use something else than fetch?

0xnoob · Accepted Answer · 2019-04-21 19:28:07Z

4

async function - JavaScript | MDN

An async function can contain an await expression that pauses the execution of the async function and waits for the passed Promise's resolution, and then resumes the async function's execution and returns the resolved value.

Add the async keyword to all functions that use getData() and use the await keyword when you call getData():

async function seedData() {
  // ...
  let data = await getData();
  // ...

function updateData() {
  var now = new Date();
  let data = await getData();
  // ...

edited Apr 21, 2019 at 19:28

answered Apr 21, 2019 at 19:22

0xnoob

1,0577 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Fetch API in sync functions and for loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related