title: How to access function inside a javascript fetch from html page
body: <p>i am trying to make a website showing a graph based on some user uploaded json files.
  I am using a fetch to get the JSON data from a servlet and i make the graph inside the fetch, this works fine. Only i'd like to make a addData() function to add extra data to the same plot. The problem is i can't access the data outside of the fetch request and i can't acces the addData() function from my html page if it's in the fetch in my javascript file. 
  Is there a good way to approach this problem?</p>
  
  <p>my JavaScript code:</p>
  
  <pre><code>
  fetch('/json_storage')
      .then((response) =&gt; {
          return response.json();
      })
      .then((myJson) =&gt; {
          let hrdata = myJson[0].heartRate;
          let timestamp = hrdata.map(t =&gt; { return t.timestamp });
  
          let bpm = hrdata.map( b =&gt; {return b.bpm});
  
  
          let ctx = document.getElementById('canvas').getContext('2d');
          let canvas = new Chart(ctx, {
              type: 'line',
              data: {
                  labels: timestamp,
                  datasets: [{
                      label: new Date(timestamp[0]),
                      data: bpm,
                      backgroundColor: 'rgba(255,0,55,0.25)',
                      pointRadius: 0
                  }]
              },
              options: {
                  title: {
                      display: true,
                      text: 'The course of your heart rate during the day'
                  },
                  scales: {
                      xAxes: [{
                          type: 'time',
                          time: {
                              unit: 'hour'
                          }
                      }]
                  }
              }
          });
  
          function addData() {
              for (let i =1; i &lt; myJson.length; i++){
                  let hrdata = myJson[i].heartRate;
                  let bpm = hrdata.map( b =&gt; {return b.bpm});
                  let timestamp = hrdata.map(t =&gt; { return t.timestamp });
  
                  canvas.data.data = bpm;
                  canvas.data.labels = timestamp;
  
                  canvas.update();
  
              }
          }
  
      });
  
  
  </code></pre>
  
  <p>and my HTML code:</p>
  
  <pre><code>&lt;button id="addData"&gt;Add dataset&lt;/button&gt;
  &lt;canvas id="canvas" width="300" height="300"&gt;&lt;/canvas&gt;
  </code></pre>