Uncaught (in promise) TypeError: Cannot read property '0' of undefined at drawChart

问题

//Ajax call
$(document).ready(function (data) {
  $("#btnGo").click(function () {
    console.log("ready!");
    $.ajax({
      url: '/api',
      type: 'POST',
      contentType: 'application/json',
      dataType: 'JSON',
      data: JSON.stringify({ startDate: $("#one").val(), endDate: $('#two').val() }),
      success: function (data) {
        
       
        var x = [data.x.count, data.x2.count, data.x3.count, data.x4.count]
        //data.x.count is getting from an api call where it will show count like 5
        drawChart(x)
        
      }

    });
  });
});
//bar chart
google.charts.load("current", { packages: ["corechart"] });
google.charts.setOnLoadCallback(drawChart);
function drawChart(x) {
  var data = google.visualization.arrayToDataTable([
    ['Tickets', 'Count', { role: "style" }],
    ['x1', x[0], "#b87333"],
    ['x2', x[1], "silver"],
    ['x3', x[2], "gold"],
    ['x4', x[3], "green"]    
  ]);
  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1,
    {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    },
    2]);

  var options = {
    title: "Tickets",
    width: 750,
    height: 550,
    bar: { groupWidth: "95%" },
    legend: { position: "none" },
  };
  var chart = new google.visualization.ColumnChart(document.getElementById("chart"));
  chart.draw(view, options);
}

1. i have defined this chart outside the ajax function
2. whenever i am calling server i am getting error in developer console(script.js:96 Uncaught (in promise) TypeError: Cannot read property '0' of undefined at drawChart)
3. after entering parameters and calling n number of times i am not seeing any errors in console 4)whenever i run server i dont want to see error.

回答1:

as you've discovered, the function gets called from the callback method without the data.
however, it is not a good idea to remove the callback,
as it is possible that the function may be called before google charts has fully loaded.
which would cause other errors.

there are a few ways to ensure google charts has loaded.
we can use the promise the load method returns.

as well, the load method will wait for the page to load by default.
so we can use google's load method in place of jquery's ready method.

recommend the following changes to ensure google charts has fully loaded,
and that the data gets properly passed to the chart.

google.charts.load("current", {
  packages: ["corechart"]
}).then(function () {
  var options = {
    title: "Tickets",
    width: 750,
    height: 550,
    bar: { groupWidth: "95%" },
    legend: { position: "none" },
  };

  var chart = new google.visualization.ColumnChart(document.getElementById("chart"));

  $("#btnGo").click(function () {
    $.ajax({
      url: '/api',
      type: 'POST',
      contentType: 'application/json',
      dataType: 'JSON',
      data: JSON.stringify({ startDate: $("#one").val(), endDate: $('#two').val() })
    }).done(function (data) {
      var x = [data.x.count, data.x2.count, data.x3.count, data.x4.count];
      //data.x.count is getting from an api call where it will show count like 5
      drawChart(x);
    });
  });

  function drawChart(x) {
    var data = google.visualization.arrayToDataTable([
      ['Tickets', 'Count', { role: "style" }],
      ['x1', x[0], "#b87333"],
      ['x2', x[1], "silver"],
      ['x3', x[2], "gold"],
      ['x4', x[3], "green"]
    ]);

    var view = new google.visualization.DataView(data);
    view.setColumns([0, 1, {
      calc: "stringify",
      sourceColumn: 1,
      type: "string",
      role: "annotation"
    }, 2]);

    chart.draw(view, options);
  }
});

回答2:

Try to remove this line:

google.charts.setOnLoadCallback(drawChart);

This line will call your function drawChart without parameters. But it needs x to works properly, as you use it when you call google.visualization.arrayToDataTable.

You don't need it as you will call drawChart in your Ajax callback.

回答3:

Scratch what i wrote earlier... I did not see this line

google.charts.setOnLoadCallback(drawChart);

that gets called when the google chart is loaded but you're not passing x..

回答4:

i removed this google.charts.setOnLoadCallback(drawChart); now not showing error.

来源：https://stackoverflow.com/questions/63056365/uncaught-in-promise-typeerror-cannot-read-property-0-of-undefined-at-drawch