title: Promise in a loop! How to?
body: <p>I've been trying to get this bit of code to work for a while, and I just can't seem to get it. It's for a live-updating graph, that takes in an array of [x, y] for each point, so an array of arrays.</p>
  
  <p>The input is a <code>JSON</code> list coming from a server, that updates that same <code>JSON</code> object (so it changes one <code>JSON</code> and updates only the value):</p>
  
  <pre><code>[
    {
      "Value": 10,
      "Name": "Name of variable"
    }
  ]
  </code></pre>
  
  <p>I need to extract the value only.</p>
  
  <p>I tried it like this:</p>
  
  <pre><code>var getValueData = async function() {
      var valueJSON = await Promise.resolve($.getJSON( "{% url 'get_value' %}" ));
      return valueJSON[0]['Value'];
  };
  
  var data = [];
  var totalPoints = 100;
  var updateInterval = 1000;
  var now = new Date().getTime();
  
  function getData() {
      data.shift();
  
      while (data.length &lt; totalPoints) {
          var value = [now += updateInterval,
                      getValueData().then(function(result) {
                          result;
                      })
                     ];
  
          data.push(value);
      };
  };
  </code></pre>
  
  <p>Basically, <code>getData()</code> is trying to build an array of <code>X = timestamp.now()</code>, and Y <code>= "Value"</code> from <code>JSON</code>, then push that array into my <code>"overall"</code> data array.</p>
  
  <p>Doing it this way makes <code>value</code> an array of <code>[&lt;timestamp&gt;, Unresolved]</code>.</p>
  
  <p>Doing it this way:</p>
  
  <pre><code>while (data.length &lt; totalPoints) {
      getZScoreData().then(function (result) {
          var valueArray = [now += updateInterval, result];
          data.push(valueArray);
      });
  };
  </code></pre>
  
  <p>Makes <code>valueArray</code> be an actual <code>[&lt;timestamp&gt;, &lt;JSON "value"]</code>, if I <code>console.log(value)</code>, except this way seems to hang the server forever and consume a huge amount of RAM for the tab, as if I was doing an infinite loop (hundreds of get requests to the web server, even though the max length should 100). I'm not sure of the what's going inside the Promise to get this behavior though.</p>
  
  <p>This here is the code that works in the example:</p>
  
  <pre><code>while (data.length &lt; totalPoints) {     
      var y = Math.random() * 100;
      var value = [now += updateInterval, y];
  
      data.push(value);
  };
  </code></pre>
  
  <p>It seems straightforward enough. Where it says y (in <code>var value = [now += updateInterval, y];</code>) make "y" get the value from my API.</p>
  
  <p>I have no clue how to actually achieve this.</p>
  
  <p>I'm following the example from <a href="http://www.pureexample.com/jquery-flot/realtime-update-line-chart.html" rel="nofollow noreferrer">this Flot example</a> but I just can't manage to make it work with an actual live value from AJAX or Promise (I even tried fetch).</p>
  
  <p>All examples for "live updating table" end up just using <code>math.random()</code>, which is pretty misleading, as it just kinda moves about, but isn't really live.</p>
  
  <p>I believe I'm not resolving the promise in the loop properly, but due to lack of experience, at this point I'm not even sure what is wrong.</p>
  
  <p>I'm not sure where in my code I would go <code>Y = "live value"</code>, or whether I have to return result somewhere? I'm not familiar with Promises or AJAX that much.</p>