javascript - How can I load data from my JSON file to my HTML page? -


my goal load data json html page.

approach

  • i made js file : update-info.js
  • in there, made ajax call json file data.json
  • if success, use jquery .html() function update html doms text fields.
  • unfortunately, work on chrome.

result in chrome

enter image description here

result in firefox + safari

enter image description here

i’m not sure why that.

did i’m not suppose ?

console error :

syntaxerror: strict mode not allow function declarations in lexically nested statement.

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 visualization api , 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         = {};             (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 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"     } }

syntaxerror: strict mode not allow function declarations in lexically nested statement.

either delete line 1 ('use strict';) or define updateinfo(x) outside loop (better in top scope, on line 4).

this function: have call 3 parameters use objects in it.

i won't write code need, think it's you. can give hints on have do:

  1. get list of variables use in function
  2. make them arguments if change, while others may used using higher or equal scope (i.e. define variables first , function)

Comments

Post a Comment

Popular posts from this blog

android - Pass an Serializable object in AIDL -

i have defined aidl file interface imyfeature { void dotask(class clazz); } but need pass class object process. possible in android? if so, how? i tried: interface imyfeature { serializable class; void dotask(class clazz); } but doesn’t work. aidl in android supports custom class implement parcelable interface. in case want send class object not possible. can send class canonical name , retrieve in service. for example have aidl file interface imyfeature { void dotask(string classname); } then call : binder.dotask(myclass.class.getcanonicalname()); and in service binder stub implementation : private final imyfeature mbinder = new imyfeature.stub() { public void dotask(string classname) { try { class<?> clazz = class.forname(classname); constructor<?> ctor = clazz.getconstructor((class[]) null); object object = ctor.newinstance(); ...
Read more

How to provide Authorization & Authentication using Asp.net, C#? -

Image
i have asp.net application in c#. i have provide page authorization specific user/usergroup. i have created 2 tables in database: 1) pagename 2)permissions[insert, update, view, delete] but i'm unable match tables , permissions assigning... can 1 please me, how created tables in database , how coding. please me. you can below explanation. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, type or paste following code. this code grants users access default1.aspx page , subdir1 folder . <configuration> <system.web> <authentication mode="forms" > <forms loginurl="login.aspx" name=".aspnetauth" protection="none" path="/" timeout="20" > </forms> </authentication> <!-- section denies access files in...
Read more

How to use Authorization & Authentication in Asp.net, C#? -

i using roll management , trying give page , folder access according user or user group, using server created ad group user authentication. i have default1.aspx page default , subdir1 folder give different access separate user group i using below logic in web.config. <location path="subdir1"> <system.web> <authorization> <allow users ="?" /> </authorization> </system.web> </location> i facing problem provide same access 2 or more directory same user should have provide allow user code twice both folder? i can use logic repeating value folder want access providing in 1 logic. i have got answer configure folder/page access, have make different access shown below.. configure access specific file , folder, set forms-based authentication. request page in application redirected logon.aspx automatically. in web.config file, done following code. this code grants user...
Read more