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: monTemplate,
        match: monMatch
    });

function monTemplate(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?

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: monTemplate,
        match: monMatch
    });

function monTemplate(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?

• javascript
• jquery
• json

• I don't suppose it's the syntax error that's messing you up? – Deniz Dogan Commented May 7, 2009 at 15:43
• When I put alert(item.Result.Id) I get back undefined. So I'm not totally sure. – Al Katawazi Commented May 7, 2009 at 15:45
• Is that JSON being returned as a string from somewhere? Are you making sure that it has been eval'ed into an object? Find out by alert(typeof item); – Josh Stodola Commented May 7, 2009 at 19:40

6 Answers 6

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
    }
}

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.

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 monTemplate function try doing console.log(item) and seeing what the result is.

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
        }
    }
]

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./ebohe (editable via http://jsbin./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;
  }
});

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

Mastering Ajax, Part 10: Using JSON for data transfer