title: Importing JSON to data and labels for chart.js
body: <p>I have a basic javascript application that should import a json file in the form of: </p>
  
  <pre><code>[{
  "name": "John",
  "group": "Schools",
  "amount": "850"
  },
  
  {
  "name": "Martin",
  "group": "Private Students",
  "amount": "10050"
  }]
  </code></pre>
  
  <p>and use it alongside chart.js, using the 'group' part as the labels, and adding to the data by the 'amount' part respectively. Can anyone help? I got it working with fixed values, but cannot seem to import and parse through the file correctly</p>
  
  <p>The main file looks like this so far, with the label being undefined as of yet:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="moneyFile.json"&gt;&lt;/script&gt;
  &lt;head&gt;
    &lt;title&gt;Money Thingy&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;canvas id="myChart" width="400" height="400"&gt;&lt;/canvas&gt;
    &lt;script&gt;
      var ctx = document.getElementById("myChart").getContext('2d');
  
     //  $.getJSON("moneyFile.json", function(data) {
     //   var labels = [];
     //   var data = [];
     //
     //   $.each( data, function( group, amount ) {
     //     labels.push(group);
     //     data.push(amount);
     //   });
     // }
  
     // var data = jQuery.getJSON("moneyFile.json");
     // console.log(JSON.stringify(data, null, 2));
  
     var data = JSON.parse(moneyFile);
     console.log(data[0]);
  
      var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labels,
            datasets: [{
                label: 'Money in',
                // data:
                backgroundColor: [
                    'rgba(255, 99, 132, 0.2)',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)'
                ],
                borderColor: [
                    'rgba(255,99,132,1)',
                    'rgba(54, 162, 235, 1)',
                    'rgba(255, 206, 86, 1)',
                    'rgba(75, 192, 192, 1)',
                    'rgba(153, 102, 255, 1)',
                ],
                borderWidth: 1
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
      });
    &lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>