如何将我的JSON文件中的数据加载到我的HTML页面？

Question

我的目标是将数据从我的JSON加载到我的HTML页面。

方法

• 我制作了一个JS文件：update-info.js
• 在那里，我对我的JSON文件data.json
进行了ajax调用
• 如果成功，我使用jQuery .html()函数来更新我的HTML DOM文本字段。
• 不幸的是，它只适用于Chrome。

Chrome中的结果

Firefox + Safari中的结果

我不确定为什么会这样做。

我做了一些我不想做的事吗？

控制台错误：

  

SyntaxError：严格模式不允许在词法嵌套语句中使用函数声明。

JS

'use strict';

define(['jquery'], function($) {

  $(function() {

    var basePath = "/BIM/resources/js/reports/student/course-benchmark/";

    $.ajax({

      url: basePath + "data.json",
      type: "GET",
      dataType : "json",

      success: function( objects ) {

         // Load the Visualization API and the piechart package.
         google.load("visualization", "1", {packages:["corechart"]});
         google.setOnLoadCallback(drawChart());

         function drawChart() {

           var options = {
            width: 160,
            height: 160,

            chartArea: {
              left: 10,
              top: 20,
              width: "100%",
              height: "100%"
            },


            colors: ['#F46E4E',  '#F9C262' , '#ADB55E',],
            legend: 'none',
            enableInteractivity: false,
            pieSliceText: 'none',

          };

          var data              = {};
          var chart             = {};

          var danger            = {};
          var warning           = {};
          var success           = {};
          var danger_list       = {};
          var warning_list      = {};
          var success_list      = {};

          var report_type       = {};
          var report_type_car   = {};
          var report_type_cdr   = {};
          var report_type_title = {};

          var section_num       = {};
          var assignment        = {};
          var date              = {};
          var correct_num       = {};
          var correct_total_num = {};
          var avg_score         = {};


          for (var object in objects) {


            danger[object]            = $('#pc-danger-'+ object);
            warning[object]           = $('#pc-warning-'+ object);
            success[object]           = $('#pc-success-'+ object);
            danger_list[object]       = $('#pc-danger-list-'+ object);
            warning_list[object]      = $('#pc-warning-list-'+ object);
            success_list[object]      = $('#pc-success-list-'+ object);

            report_type[object]       = $('#sa-report_type-'+ object);
            report_type_car[object]   = $('#sa-report-type-car-'+ object);
            report_type_cdr[object]   = $('#sa-report-type-cdr-'+ object);
            report_type_title[object] = $('#sa-report-type-title-'+ object);

            section_num[object]       = $('#sa-section-num-'+ object);
            assignment[object]        = $('#sa-assignment-'+ object);
            date[object]              = $('#sa-date-'+ object);
            correct_num[object]       = $('#sa-correct-num-'+ object);
            correct_total_num[object] = $('#sa-correct-total-num-'+ object);
            avg_score[object]         = $('#sa-avg-score-'+ object);




             function updateInfo(x) {

              danger[object].html(objects[x].danger);
              warning[object].html(objects[x].warning);
              success[object].html(objects[x].success);

              danger_list[object].html(objects[x].danger_list);
              warning_list[object].html(objects[x].warning_list);
              success_list[object].html(objects[x].success_list);

            }


            function updateStudentAccordion(x) {


              var report_type_full = objects[x].report_type.split(/(\s+)/);
              var car = report_type_full[0];
              var cdr = report_type_full[2];

              // console.log(cdr);

              report_type_car[object].html(car);
              report_type_cdr[object].html(cdr);

              report_type_title[object].html( car + " " + cdr + " " + objects[x].section_num );

              section_num[object].html(objects[x].section_num);
              assignment[object].html(objects[x].assignment);
              date[object].html(objects[x].date);
              correct_num[object].html(objects[x].correct_num);
              correct_total_num[object].html(objects[x].correct_total_num);
              avg_score[object].html(objects[x].avg_score);

            }

            var total = objects[object].danger + objects[object].warning + objects[object].success ;

            data[object] = new google.visualization.arrayToDataTable([

              ['Piechart' , 'Number of Skills'],
              ['danger'   , ( objects[object].danger/total )  * 100  ],
              ['warning'  , ( objects[object].warning/total ) * 100  ],
              ['success'  , ( objects[object].success/total ) * 100  ],


              ]);

            // piechart object
            var $el = $('#sa-piechart-' + object  );

            // button
            var button = $('.sa-report-btn-'+ object );

            // append
            var $el = $('#sa-piechart-' + object ).length ? $('#sa-piechart-' + object ) : $('<div id="sa-piechart-' + object +'"></div>').appendTo($('#sa-piechart-'+ object ));


            chart[object] = new google.visualization.PieChart($el[0]);


            // Call Functions
            updateStudentAccordion(object);
            chart[object].draw(data[object], options );
            updateInfo(object);

          }

        }

      },

      error: function( xhr, status, errorThrown ) {
        alert( "Sorry, there was a problem!" );

        console.log( "Error: " + errorThrown );
        console.log( "Status: " + status );
        console.dir( xhr );
      },


    });

});

});

JSON

{

    "a": {

        "report_type": "chapter test",
        "section_num": "2",
        "assignment": "algebra 1",
        "date": "2/10/2015",
        "correct_num": "15",
        "correct_total_num": "20",
        "avg_score": "89",
        "danger": "5",
        "danger_list": "5,10,15,19,23",
        "warning": "8",
        "warning_list": "3,7,11,13,14,16,21,22",
        "success": "12",
        "success_list": "1,2,4,6,8,9,12,17,18,20,24,25"
    },

    "b": {

        "report_type": "section exercise",
        "section_num": "2.2",
        "assignment": "algebra 2",
        "date": "2/09/2015",
        "correct_num": "11",
        "correct_total_num": "25",
        "avg_score": "44",
        "danger": "12",
        "danger_list": "11,12,13,14,15,16,17,18,19,20,3,4",
        "warning": "2",
        "warning_list": "1,2",
        "success": "11",
        "success_list": "21,21,23,24,25,5,6,7,8,9,10"
    },

    "c": {

        "report_type": "chapter test",
        "section_num": "1",
        "assignment": "algebra 3",
        "date": "1/10/2015",
        "correct_num": "15",
        "correct_total_num": "20",
        "avg_score": "75",
        "danger": "0",
        "danger_list": "",
        "warning": "10",
        "warning_list": "1,2,3,4,5,6,7,8,9,10",
        "success": "15",
        "success_list": "11,12,13,14,15,16,17,18,19,20,21,22,23,24,25"
    },

    "d": {

        "report_type": "practice test",
        "section_num": "1",
        "assignment": "algebra 4",
        "date": "1/09/2015",
        "correct_num": "15",
        "correct_total_num": "20",
        "avg_score": "79",
        "danger": "5",
        "danger_list": "1,2,3,4,5",
        "warning": "0",
        "warning_list": "",
        "success": "20",
        "success_list": "6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25"
    }
}

Answer 1

SyntaxError: Strict mode does not allow function declarations in a lexically nested statement.

删除第1行（'use strict';）或在循环外定义updateInfo(x)（在最高范围内更好，如第4行所示）。

这是函数：当你在其中使用这些对象时，你必须使用3个参数调用它。

我不会写你需要的代码，因为我认为这取决于你。我可以给你提示你要做什么：

1. 获取您在函数
中使用的变量列表
2. 如果它们发生变化则使它们成为参数，而其他参数可以使用更高或相同的范围（即首先定义变量然后定义函数）