Grabbing data from JSON using Javascript

Question

Ok so I have a json output that looks like this:

{"Result" : [
              {
                "Id" : "5214",
                "ParentReasonId" : "0",
                "Description" : "Billing & Payment",
                "SysName" : "Billing & Payment",
                "SysCategory" : "Billing & Payment",
                "ClientId" : "924",
                "DispositionCount" : "6",
                "IsActive" : true,
                "ChildReasonCount" : "8",
                "Attributes" : [],
                "SortOrder" : "0",
                "CreatedBy" : null
              }
            ]
 }

And I would like to pull the data for id and description out of this.

    jQuery("#chained_child").cascade("#chained", {
    ajax: { url: 'Customhandler.ashx?List=MyList' },
        template: commonTemplate,
        match: commonMatch
    });

function commonTemplate(item) {
    return "<option Value='" + item.Result.Id + "'>" 
           + item.Result.Description + "</option>";
};

But for the life of me I can't get it to return the value I am looking for. I know this is something noobish but I am hitting a wall. Can anyone help?

Answer 1

If you examine your JSON string, your Result object is actually an array of size 1 containing an object, not just an object. You should remove the extra brackets or refer to your variable using:

item.Result[0].Id

In order to reference your variable using item.Result.Id you would need the following JSON string:

{
    "Result" :
    {
        "Id" : "5214",
        "ParentReasonId" : "0",
        "Description" : "Billing & Payment",
        "SysName" : "Billing & Payment",
        "SysCategory" : "Billing & Payment",
        "ClientId" : "924",
        "DispositionCount" : "6",
        "IsActive" : true,
        "ChildReasonCount" : "8",
        "Attributes" : [],
        "SortOrder" : "0",
        "CreatedBy" : null
    }
}

Answer 2

One thing that has helped me immensely with JSON funkyness has been setting breakpoints in Firebug, which let's you step through the resulting object, and view its structure.

Answer 3

You might want to take a look at this JSON tutorial from IBM:

Mastering Ajax, Part 10: Using JSON for data transfer

Answer 4

item.Result[0].Id works as Sebastian mentioned - however it only works if "item" is actually assigned a value. My guess is it's not.

In your commonTemplate function try doing console.log(item) and seeing what the result is.

Answer 5

As far as I see it on the plugin page, the argument send to the template callback is an item from the JSON response, which is an Array. Your JSON response is an Object. I guess you're not sending the correct JSON response. But take that with a grain of salt, as I've never used this plugin.

Anyway, if I'm right, you're response should be:

[
    {
        "Result" :
        {
            "Id" : "5214",
            "ParentReasonId" : "0",
            "Description" : "Billing & Payment",
            "SysName" : "Billing & Payment",
            "SysCategory" : "Billing & Payment",
            "ClientId" : "924",
            "DispositionCount" : "6",
            "IsActive" : true,
            "ChildReasonCount" : "8",
            "Attributes" : [],
            "SortOrder" : "0",
            "CreatedBy" : null
        }
    }
]

Answer 6

Ionut G. Stan's answer is correct. Your json output is not the correct format for the cascade plugin.

If you don't want to change your json, you can use the dataFilter option in the ajax settings to augment the data.

I've set up a working demo here: http://jsbin.com/ebohe (editable via http://jsbin.com/ebohe/edit )

Here's the pertinent javascript:

$(function(){
  $('#chained_child').cascade(
    '#chained',
    {
      ajax: {
        url: 'Customhandler.ashx?List=MyList',
        dataFilter: extractResult
      },
      template: customTemplate,
      match: customMatch
    }
  );

  function extractResult(data) {
    return eval('(' + data + ')').Result;
  }

  function customTemplate(item) {
    return $('<option />')
      .val(item.Id)
      .text(item.Description);
  }

  function customMatch(selectedValue) {
    return this.ParentReasonId == selectedValue;
  }
});