Javascript jquery解析JSON结果

我有一个日期范围选择器，可以触发开始和结束日期。我正在尝试在更新开始/结束日期后更新2个图表。我不确定如何从getJSON调用jquery调用中传递和解析日期变量

JSON:

对JSON文件的jquery调用：

(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);

---

不确定问题出在哪里，您提供的示例可以一字不差地工作

通过使用（创建一个虚假的AJAX响应），我能够立即实现这一点

HTML

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

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

---

data

属性是什么？您的代码有什么问题？查看以了解如何访问嵌套对象、数组。包含x和y属性的对象数组，如xkey和ykeys选项所述。这里有一个来自morris.js的例子：数据：[{year:'2008'，value:20}，{year:'2009'，value:10}，{year:'2010'，value:5}，{year:'2011'，value:5}，{year:'2012'，value:20}]有没有弄清楚你的问题？

<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);