title: Javascript Waiting for result before continuing
body: <p>I am new to Javascript and trying to run before I can walk but I have to produce a result so here I am.</p>
  
  <p>I thought I had found the answer to this in another question but it did not work for me as expected, below is my script the function of which is to look at a SharePoint list and return some values into 3 arrays, I then use those arrays to provide data to complete some chart data.</p>
  
  <pre><code>                    &lt;script&gt;
                      // load all necessary sharepoint javascript libaries
                      SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
  
                          // load the sharepoint list.
                          loadSharepointList();
                      });
                      var arrPlan = new Array()
                      var arrActual = new Array()
                      var arrMonth = new Array()
  
  
                      // loads the sharepoint list
                      function loadSharepointList() {
  
                          // create the sharepoint content.
                          var context = SP.ClientContext.get_current();
  
                          // get the list by the title.
                          var list = context.get_web().get_lists().getByTitle('Package');
  
                          // create the query.
                          var caml = new SP.CamlQuery();
                          caml.set_viewXml(''); 
  
                          // get the list items asynchronously
                          var listItems = list.getItems(caml);
                          context.load(listItems , 'Include(Title,Month,Plan,Actual)');
                          context.executeQueryAsync(
  
                              // success delegate
                              Function.createDelegate(this, function() {
  
                              // loop through the items.
                                  var listEnumerator = listItems.getEnumerator();
                                  while (listEnumerator.moveNext()) {
  
                                      // get the current list item.
                                      var listItem = listEnumerator.get_current();
  
                                      // get the field value.
                                      var titleValue = listItem.get_item('Month');
                                      var monthValue = listItem.get_item('Month');
                                      var planValue = listItem.get_item('Plan');
                                      var actualValue = listItem.get_item('Actual');
                                      //alert(monthValue);
                                      arrPlan.push(planValue);
                                      arrActual.push(actualValue);
                                      arrMonth.push(monthValue);
                                      //alert(arrMonth);
  
                                  }
  
                              }),
  
                              // error delegate
                              Function.createDelegate(this, function() {
                                  alert('Error fetching data from Sharepoint!');      
                              }));
  
                      }
  
                              //var labels = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"];
                              var netpphcanvas = document.getElementById("pphchart");
                              var planData = {
                                  label: 'Plan',
                                  fill: false,
                                  data: [1.06,1.58,1.74,1.62,1.50,1.37,1.36,1.44,1.84,1.76],
                                  backgroundColor: 'rgba(133, 133, 133, 1)',
                                  borderColor: 'rgba(133, 133, 133, 1)',
                                  borderWidth: 3,
                                  yAxisID: "y-axis-region"
                              };
                              var actualData = {
                                  label: 'Actual',
                                  fill: false,
                                  data: [1.37,1.65,1.84, 1.78,1.55, 1.74,1.57, 1.74,1.90,1.63],
                                  backgroundColor: 'rgba(99, 132, 0, 0.6)',
                                  borderColor: 'rgba(99, 132, 0, 0.6)',
                                  borderWidth: 3,
                                  yAxisID: "y-axis-region"
                              };
                              //********This is the part I am using for testing
  //***********
                              var netpphData = {
                                  //labels: labels,
                                  labels: arrMonth,
                                  datasets: [planData,actualData]
                                              };
                              var netdelOptions = {
                              scales: {
                                  xAxes: [{
                                      barPercentage: 1,
                                      categoryPercentage: 0.6
                                  }],
                                  yAxes: [{
                                      id: "y-axis-region"
                                  }]
                              },
                              elements: {
                                  line: {
                                      tension: 0, // disables bezier curves
                                  }
                              },
                              title: {
                                  display: true,
                                  text: 'Net-Delivered PPH',
                                  fontSize: 12
                              },
                              legend: {
                                  display: true,
                                  labels: {
                                      fontColor: '#000',
                                      fontSize: 12
                                  }
                              }
  
  
                          };
  
                          var lineChart = new Chart(netpphcanvas, {
                              type: 'line',
                              data: netpphData,
                              options: netdelOptions
                          });
                      &lt;/script&gt;
  </code></pre>
  
  <p>I am attempting to use the returned arrays to complete the Data and labels section of the chart, in order to test this I am starting with the monthly data, which is retrieved in this section of code...</p>
  
  <pre><code>context.executeQueryAsync(
  
                          // success delegate
                          Function.createDelegate(this, function() {
  
                          // loop through the items.
                              var listEnumerator = listItems.getEnumerator();
                              while (listEnumerator.moveNext()) {
  
                                  // get the current list item.
                                  var listItem = listEnumerator.get_current();
  
                                  // get the field value.
                                  var titleValue = listItem.get_item('Month');
                                  var monthValue = listItem.get_item('Month');
                                  var planValue = listItem.get_item('Plan');
                                  var actualValue = listItem.get_item('Actual');
                                  //alert(monthValue);
                                  arrPlan.push(planValue);
                                  arrActual.push(actualValue);
                                  arrMonth.push(monthValue);
                                  //alert(arrMonth);
  
                              }
  
                          }),
  </code></pre>
  
  <p>I have validated this works using the alert method and it does indeed return the months into the array called arrMonth</p>
  
  <p>however, the rest of the script seems to run before this data source is accessed and the arrMonth is filled.</p>
  
  <p>I have checked this also by using another array called labels and manually filing it and it works correctly.</p>
  
  <p>I thought the reason for this was because the function to get the data was being called Asynchronously </p>
  
  <pre><code>context.executeQueryAsync(
  </code></pre>
  
  <p>however, I changed this to <code>context.executeQuery(</code> and still got the same result that the page loads before the data are retrieved</p>
  
  <p>Clearly, I have missed something and I would appreciate any help</p>
  
  <p>Kind regards
  Derek</p>