“无法读取 null 的属性长度” - Google答案

【问题标题】："cannot read property length of null" - Google“无法读取 null 的属性长度” - Google
【发布时间】：2015-10-20 06:12:32
【问题描述】：

我正在使用 Flask 编写一个简单的应用程序。我正在使用 Google API 来绘制图表。第一页显示正确。

但在接下来的页面中，我收到“无法读取 null 的属性长度”错误。

我的代码如下图：

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="100; URL=http://127.0.0.1:5000/">
    <title>Test</title>
    <!-- Bootstrap Core CSS -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">
    <link href="static/css/bootstrap-multiselect.css" rel="stylesheet">
    <link href="static/css/new.css" rel="stylesheet">
    <!-- Custom Fonts -->
    <link href="static/lib/css/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
    <!-- JavaScript -->
    <script src="static/js/jquery.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/bootstrap-multiselect.js"></script>
    <script src="static/js/Chart.js-master/Chart.js"></script>
  </head>

  <body onload = onLoading()>
    <div class="container">
      <div class="col-xs-12">

        <div class="page-header">
          <h3><b>Test</b></h3>
        </div>

        <div class="carousel slide" id="myCarousel">
          <nav>
            <ul class="control-box pager">
              <li><a data-slide="prev" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-left"></i></a></li>
              <li><a data-slide="next" href="#myCarousel" class=""><i class="glyphicon glyphicon-chevron-right"></i></li>
            </ul>
          </nav>
          <!-- /.control-box -->
          <!-- Slide1 -->
          <div class="carousel-inner" id="imp">
            <!-- /Slide1 -->
          </div><!-- /Carousel inner -->
        </div><!-- /#myCarousel -->
      </div><!-- /.col-xs-12 -->
    </div><!-- /.container -->

    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      // Carousel Auto-Cycle
      $(document).ready(function() {
        $('.carousel').carousel({
          interval: 3000
        })
      });

      function onLoading() {
        //alert("Inside");      
        $.get("/load",function(calldata,status) {
          //console.log(calldata);
          //alert(calldata.length);
          var num_nodes = calldata.length;
          var loop = 0;

          for (i=0;i<num_nodes;i++) {
            if (i%4==0) {
              if (i==0) {
                var divoutput = document.getElementById("imp");
                var divhtml = '<div class="item active" id="c'+(i/4)+'"></div>';
                divoutput.innerHTML = divoutput.innerHTML+divhtml;
                alert(i);
                console.log(divoutput.innerHTML);
              } else {
                var divoutput = document.getElementById("imp");
                var divhtml = '<div class="item" id="c'+(i/4)+'"></div>';
                divoutput.innerHTML = divoutput.innerHTML+divhtml;
                loop = i/4;
                alert(loop);
                console.log(divoutput.innerHTML);
              }
            }
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Errors');
            data.addColumn('number', 'Statistics');
            data.addRows([
              ['Success',     calldata[i].errors.success],
              ['Authorization Failure', calldata[i].errors.auth_failure],
              ['Feature Failure',  calldata[i].errors.feature_failure],
              ['FSOL Failure', calldata[i].errors.fsol_failure]
            ]);

            var options = {
              title: calldata[i].node_name,
              is3D: true,
              backgroundColor:'#ECECEA',
            };

            var output = document.getElementById("c"+loop);
            //alert("***"+document.getElementById("c"+loop));
            var html = '<div class="col-sm-6"><div class="fff"><div class="thumbnail" id="i'+i+'"></div></div></div>';
            //alert(html);
            output.innerHTML = output.innerHTML + html;
            var tmp = "i";
            var ele_id = tmp.concat(i);
            //alert(ele_id);
            if (calldata[i].errors.success < calldata[i].errors.auth_failure) {
              document.getElementById("i"+i).style.backgroundColor = "red";
            }
            google.setOnLoadCallback(drawChart(ele_id,data,options));
          }
        });
      }

      function drawChart(ele_id,data,options)
      {
        google.load("visualization", "1", {packages:["corechart"]});
        //alert(ele_id);  
        //alert("draw"+document.getElementById(ele_id));
        var chart = new google.visualization.PieChart(document.getElementById(ele_id));
        chart.draw(data, options);
      }
    </script>
  </body>
</html>

【问题讨论】：

在哪一行出错？
当您为“load”调用 get 时，calldata 可能为空。
我没有在控制台中收到错误，而是在框中显示错误，而不是显示我的图表。第一页工作得很好。
@ParkashKumar 第一个滑块非常好。但是下一个滑块会抛出这个错误。
通过你的get方法调试，检查n次是否为null？

标签： javascript jquery html twitter-bootstrap google-api

【解决方案1】：

我使用引导选项卡并希望在隐藏选项卡上显示图表，但我遇到了与您相同的错误

当我在活动表上显示图表时，它显示得很完美。

所以我猜有一些东西链接到 DOM 和隐藏元素与你的数据无关

【讨论】：