Jquery.getJson missing something?

Question

I have below piece of code and trying to populate my slickgrid with json data which my webservice returns. but the grid is not getting populated. The data returned is empty as i see nothing comming in alert window.

$(function ()
{
    var slickdata = [];
    $.getJSON("comm/j/abc?action=hi", function(data) 
    {
        // data is a JavaScript object now. Handle it as such
        for (var i=0;i<data.length;i++)
        {
            alert("slickdata i" );

            slickdata[i] = 
            {
                month: data[i].month,
                teamed: data[i].teamed,
                net: data[i].net
            };
        }
    });

    alert(slickdata);

    // dataView = new Slick.Data.DataView({ inlineFilters: true });
    grid = new Slick.Grid("#myGrid", slickdata, columns, options);
    // grid.setSelectionModel(new Slick.RowSelectionModel());
})

Output of my service call below (JSONData)

{
    p: {
        month: "May-2014",
        teamed: "Y",
        net: 100000
    }
}

No error is displayed at console

First of all, don't use alerts for troubleshooting. Second, try console.log(data). "slickdata i" is a text string. — Jay Blanchard, Apr 28 '14 at 21:20
getJSON is asynchronous. So, slickdata is not going to be populated by the time you alert it/use it. — Lee Taylor, Apr 28 '14 at 21:43

score 0 · Answer 1 · answered Apr 28 '14 at 21:28

Are you sure you're getting nothing back from webservice? Try to add this just before your for loop:

alert(data.toSource());

Then, instead of alert(slickdata); IMHO you should write alert(slickdata.toSource()); since it's an array of objects.

score 0 · Answer 2 · answered Apr 28 '14 at 21:42

First, you can't loop over an object based on it's length if the object doesn't have a length. In your case, you can simply use data.p.

slickdata[0] = data.p; // this replaced your entire for loop

Additionally, you need to initialize the grid inside of the success callback, otherwise it can't access slickdata.

$(function(){
    $.getJSON("comm/j/abc?action=hi", function(data) {
        grid = new Slick.Grid("#myGrid", [data.p], columns, options);
    });
});

I have no idea though whether or not the grid will work with that data.

score 0 · Accepted Answer · answered Apr 28 '14 at 21:48

If you are expecting an array of objects (I get a little bit confused about your data structure) then you can iterate through it using a for loop, but as per your JSON output, there is no array and you are simply getting an object. So you need only to get this object and use it:

var slickdata = [];
$.getJSON("comm/j/abc?action=hi", function(data) {
  myData = data.p;
  slickdata[0] = {
    month: myData.month,
    teamed: myData.teamed,
    net: myData.net
  };
 });

Jquery.getJson missing something?

3 Answers3