title: Loop Dataset ChartJS Javascript
body: <p>I am fetching an array of datasets from an API that returns the following : </p>
  
  <pre><code>[
  "[0,0,0,0,0,0,0,0,0,0,0,0,0,58,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]",
  "[0,0,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]",
  "[0,0,381,0,0,649,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]"
  ]
  </code></pre>
  
  <p>I need to iterate each one of the above in my Chart JS Linechart as shown below : </p>
  
  <pre><code> var lineChartData = {
  labels: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12', '13', '14','15', '16', '17', '18', '19', '20', '21','22', '23', '24', '25', '26', '27','28','29','30','31'],
  datasets: [{
    label: 'My First dataset',
    fillColor: 'rgba(220,220,220,0.2)',
    strokeColor: 'rgba(220,220,220,1)',
    pointColor: 'rgba(220,220,220,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(220,220,220,1)',
    data: dataset[0]
  }, {
    label: 'My Second dataset',
    fillColor: 'rgba(151,187,205,0.2)',
    strokeColor: 'rgba(151,187,205,1)',
    pointColor: 'rgba(151,187,205,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(151,187,205,1)',
    data: dataset[1]
  },
  {
    label: 'My Third dataset',
    fillColor: 'rgba(151,187,205,0.2)',
    strokeColor: 'rgba(151,187,205,1)',
    pointColor: 'rgba(151,187,205,1)',
    pointStrokeColor: '#fff',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(151,187,205,1)',
    data: dataset[2]
  }]
  </code></pre>
  
  <p>The number of datasets fetched from the API are variable, so I may require x number of datasets on the Line Chart.</p>
  
  <p>How do I loop the array in my dataset?</p>
  
  <p>The logic I thought of :</p>
  
  <pre><code>var lineChartData = {
  labels : [1,2,3..]
  for(i=0;i&lt;array.length;i++)
  {
       datasets : [{
       data : array[i]}]
  }
  </code></pre>
  
  <p>New Updated Code after Nina's Help : </p>
  
  <pre><code>var xmlhttp = new XMLHttpRequest();
  var url = "http://www.autosys.xyz/api/v1/getAllEmpDailyData?clientid=132617";
  
  xmlhttp.onreadystatechange = function() {
      if (xmlhttp.readyState == 4 &amp;&amp; xmlhttp.status == 200) {
          var myArr = JSON.parse(xmlhttp.responseText);
          myFunction(myArr);
      }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
  
  function myFunction(arr) {
  
    var lineChartData = { 
      labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'], 
      datasets: [{ 
        label: 'My First dataset', 
        fillColor: 'rgba(220,220,220,0.2)', 
        strokeColor: 'rgba(220,220,220,1)', 
        pointColor: 'rgba(220,220,220,1)', 
        pointStrokeColor: '#fff', 
        pointHighlightFill: '#fff', 
        pointHighlightStroke: 'rgba(220,220,220,1)', 
        data: null }, 
        { 
          label: 'My Second dataset', 
          fillColor: 'rgba(151,187,205,0.2)', 
          strokeColor: 'rgba(151,187,205,1)', 
          pointColor: 'rgba(151,187,205,1)', 
          pointStrokeColor: '#fff', 
          pointHighlightFill: '#fff', 
          pointHighlightStroke: 'rgba(151,187,205,1)', 
          data: null }, 
          { 
            label: 'My Third dataset', 
            fillColor: 'rgba(151,187,205,0.2)', 
            strokeColor: 'rgba(151,187,205,1)', 
            pointColor: 'rgba(151,187,205,1)', 
            pointStrokeColor: '#fff', 
            pointHighlightFill: '#fff', 
            pointHighlightStroke: 'rgba(151,187,205,1)', 
            data: null }] },
      array = arr;
  
  array.forEach(function (a, i) {
      lineChartData.datasets[i].data = JSON.parse(a);
  });
  
  console.log(lineChartData);
  </code></pre>