Not defined error seen when using JSON data

Question

If I use the following code to get a JSON file:

const requestURL =
  "https://securitynews.s3.eu-west-2.amazonaws.com/testchartdata.json";
const request = new XMLHttpRequest();
request.open("GET", requestURL);
request.send();`

`request.onreadystatechange = function() {
  if (request.readyState === 4) {
    var chartObject = request.response;
    console.log(chartObject);
  }
};`

How do I then use the chartObject object in my code i.e. chartObject.companies as I get an error saying "chartObject is not defined"

I would like to use the chart object data here:

labels: [chartObject.companies.one, chartObject.companies.two, chartObject.companies.three, chartObject.companies.four, chartObject.companies.five, ],

for context this is all of the script:

    <script>

const requestURL =
  "https://securitynews.s3.eu-west-2.amazonaws.com/testchartdata.json";
const request = new XMLHttpRequest();
request.open("GET", requestURL);
request.send();

request.onreadystatechange = function() {
  if (request.readyState === 4) {
    var chartObject = request.response;
    console.log(chartObject
    );
  }
};

var ctx = document.getElementById('myChart');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: [chartObject.companies.one, chartObject.companies.two, chartObject.companies.three, chartObject.companies.four, chartObject.companies.five, ],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2],
            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
                }
            }]
        }
    }
});
</script>

Answer 1

Did you just ask the same question or was that someone else? 😅

You provide a callback to XMLHttpRequest so when the call is done your callback does stuff with the response.

const requestURL =
  "https://securitynews.s3.eu-west-2.amazonaws.com/testchartdata.json";
const request = new XMLHttpRequest();
request.open("GET", requestURL);
request.send();

request.onreadystatechange = function() {
  if (request.readyState === 4) {
    doStuffWithResponse(request.response);
  }
};

function doStuffWithResponse(chart) {
  console.log(JSON.parse(chart).companies)
  /*var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: "bar",
    data: {
      labels: [
        chartObject.companies.one,
        chartObject.companies.two,
        chartObject.companies.three,
        chartObject.companies.four,
        chartObject.companies.five
      ],
      datasets: [
        {
          label: "# of Votes",
          data: [12, 19, 3, 5, 2],
          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
            }
          }
        ]
      }
    }
  });*/
}