jquery解析JSON結果

我有一個日期範圍選擇器，可以啓動開始日期和結束日期。我試圖在開始/結束日期更新後更新2個圖表。我不確定如何從我的getJSON調用jquery調用中傳遞和解析日期變量。jquery解析JSON結果

JSON：

{ 
    "bar": { 
     "bar1": { 
      "x": "1/1/2014", 
      "a": "9", 
      "b": "6" 
     }, 
     "bar2": { 
      "x": "1/2/2014", 
      "a": "5", 
      "b": "7" 
     }, 
     "bar3": { 
      "x": "1/3/2014", 
      "a": "8", 
      "b": "9" 
     }, 
     "bar4": { 
      "x": "2/1/2014", 
      "a": "7", 
      "b": "9" 
     } 
    }, 
    "barstack": { 
     "bar1": { 
      "x": "1/1/2014", 
      "y": "9", 
      "z": "6", 
      "a": "8" 
     }, 
     "bar2": { 
      "x": "1/2/2014", 
      "y": "5", 
      "z": "7", 
      "a": "3" 
     }, 
     "bar3": { 
      "x": "1/3/2014", 
      "y": "8", 
      "z": "9", 
      "a": "6" 
     }, 
     "bar4": { 
      "x": "2/1/2014", 
      "y": "7", 
      "z": "9", 
      "a": "8" 
     } 
    } 
}

jQuery的調用JSON文件：

(function ($, window, undefined) { 
    "use strict"; 
    $(document).ready(function ($) { 
     $.getJSON("js/data.json", function(json) { 
     //console.log(Object.keys(json.line).map(function(key) {return json.line[key]})); 

     if (typeof Morris != 'undefined') { 

      //Bar chart 
      Morris.Bar({ 
       element: 'barchart', 
       axes: true, 
       data: Object.keys(json.bar).map(function(key) {return json.bar[key]}), 
       resize: true, 
       xkey: 'x', 
       ykeys: ['a', 'b'], 
       labels: ['myCalories','myCaloriesBurned'], 
       barColors: ['#558C89','#D9853B'] 
      }); 

      Morris.Bar({ 
       element: 'barstacked', 
       data: Object.keys(json.barstack).map(function(key) {return json.barstack[key]}), 
       resize: true, 
       xkey: 'x', 
       ykeys: ['y', 'z', 'a'], 
       labels: ['Tennis', 'Golf', 'Running'], 
       stacked: true, 
       barColors: ['#558C89', '#74AFAD', '#D9853B'] 
      }); 
     }  
    }); 
    }); 
})(jQuery, window);

來源

2014-02-21 davids12

什麼是'data'財產意思是什麼？ – JamesHalsall

你有什麼問題？看看http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-JSON學習如何訪問嵌套的對象，數組。 –

對象數組，其中包含xkey和ykeys選項所描述的x和y屬性。以下是morris.js的一個示例：data：[ {year：'2008'，value：20}， {year：'2009'，value：10}， {year：'2010'，value：5}， {year：'2011'，value：5}， {year：'2012'，value：20} ] – davids12

不知道是什麼問題，你逐字提供作品的例子。

使用mockjax（創建一個假AJAX響應）我能夠立即得到這個工作。

Live Demo

HTML

<div id="barchart" style="height: 250px;"></div> 

<div id="barstacked" style="height: 250px;"></div>

$.mockjax({ 
    url: '/js/data.json', 
    responseTime: 750, 
    responseText: { 
    "bar": { 
     "bar1": { 
      "x": "1/1/2014", 
      "a": "9", 
      "b": "6" 
     }, 
     "bar2": { 
      "x": "1/2/2014", 
      "a": "5", 
      "b": "7" 
     }, 
     "bar3": { 
      "x": "1/3/2014", 
      "a": "8", 
      "b": "9" 
     }, 
     "bar4": { 
      "x": "2/1/2014", 
      "a": "7", 
      "b": "9" 
     } 
    }, 
    "barstack": { 
     "bar1": { 
      "x": "1/1/2014", 
      "y": "9", 
      "z": "6", 
      "a": "8" 
     }, 
     "bar2": { 
      "x": "1/2/2014", 
      "y": "5", 
      "z": "7", 
      "a": "3" 
     }, 
     "bar3": { 
      "x": "1/3/2014", 
      "y": "8", 
      "z": "9", 
      "a": "6" 
     }, 
     "bar4": { 
      "x": "2/1/2014", 
      "y": "7", 
      "z": "9", 
      "a": "8" 
     } 
    } 
} 
}); 

(function ($, window, undefined) { 
    "use strict"; 
    $(document).ready(function ($) { 
     $.getJSON("/js/data.json", function(json) { 
     //console.log(Object.keys(json.line).map(function(key) {return json.line[key]})); 

     if (typeof Morris != 'undefined') { 

      //Bar chart 
      Morris.Bar({ 
       element: 'barchart', 
       axes: true, 
       data: Object.keys(json.bar).map(function(key) {return json.bar[key]}), 
       resize: true, 
       xkey: 'x', 
       ykeys: ['a', 'b'], 
       labels: ['myCalories','myCaloriesBurned'], 
       barColors: ['#558C89','#D9853B'] 
      }); 

      Morris.Bar({ 
       element: 'barstacked', 
       data: Object.keys(json.barstack).map(function(key) {return json.barstack[key]}), 
       resize: true, 
       xkey: 'x', 
       ykeys: ['y', 'z', 'a'], 
       labels: ['Tennis', 'Golf', 'Running'], 
       stacked: true, 
       barColors: ['#558C89', '#74AFAD', '#D9853B'] 
      }); 
     }  
    }); 
    }); 
})(jQuery, window);

來源

2014-02-22 03:16:34

jquery解析JSON結果

回答

相關問題