jquery parse JSON results

Question

I have a date range picker that fires a start and end date. I'm trying to update 2 charts after the start/end dates have been updated. I'm not sure exactly how to pass and parse the date variables from my getJSON call jquery call.

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 call to JSON file:

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

What's the problem with the code you have? Have a look http://stackoverflow.com/questions/11922383/access-process-nested-objects-arrays-or-JSON to learn how to access nested objects, arrays. — Felix Kling, Feb 21 '14 at 18:53
An array of objects, containing x and y attributes as described by the xkey and ykeys options. Here's an example from morris.js: data: [ { year: '2008', value: 20 }, { year: '2009', value: 10 }, { year: '2010', value: 5 }, { year: '2011', value: 5 }, { year: '2012', value: 20 } ] — davids12, Feb 21 '14 at 18:55

score 0 · Answer 1 · answered Feb 22 '14 at 03:16

Not sure what the problem is, the example you provided works verbatim.

Using mockjax (to create a fake AJAX response) I was able to get this working immediately.

Live Demo

HTML

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

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

JS

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

jquery parse JSON results

1 Answers1