CODEWITHSUNDEEP
javascriptjqueryjson
Al Katawazi
Al Katawazi

Reputation: 7240

Grabbing data from JSON using Javascript

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?

Upvotes: 1

Views: 1192

Answers (6)

brianpeiris
brianpeiris

Reputation: 10795

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

Upvotes: 1

Ionuț G. Stan
Ionuț G. Stan

Reputation: 179189

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

Upvotes: 1

Mike Robinson
Mike Robinson

Reputation: 25159

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.

Upvotes: 1

Robert S. Barnes
Robert S. Barnes

Reputation: 40578

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

Mastering Ajax, Part 10: Using JSON for data transfer

Upvotes: 0

swilliams
swilliams

Reputation: 48940

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.

Upvotes: 1

Sebastian Celis
Sebastian Celis

Reputation: 12195

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

Upvotes: 6

Related Questions