Why can't I loop through my json object using jQuery?

Question

I am using jquery to loop through json object... But some how it doesn't seem to work...

Here is my code,

$.ajax({
      type: "POST",
      url: "Default.aspx/GetRecords",
      //      data: "{}",
      data: "{'currentPage':1,'pagesize':5}",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function(jsonObj) {
          alert(jsonObj);
          for (var i = jsonObj.length - 1; i >= 0; i--) {
            var employee = jsonObj[i];
            alert(employee.Emp_Name);

When alerted my jsonObj i got [object Object] but when i alerted jsonObj.length it showed undefined any suggestion....

EDIT:

using the answer below i cant iterate through divs,

$.each(jsonObj, function(i, employee) {
   $('<div class="resultsdiv"><br /><span class="resultName">' + employee[i].Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee[i].Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee[i].SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee[i].FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee[i].Address + '</span></div>').insertAfter('#ResultsDiv');
 });

My json object will be this,

{
  "Table": [{
    "Row": "1",
    "Emp_Id": "3",
    "Emp_Name": "Jerome",
    "Address": "Madurai",
    "Desig_Name": "Supervisior",
    "SalaryBasis": "Monthly",
    "FixedSalary": "25000.00"
  }, {
    "Row": "2",
    "Emp_Id": "4",
    "Emp_Name": "Mohan",
    "Address": "Madurai",
    "Desig_Name": "Acc ",
    "SalaryBasis": "Monthly",
    "FixedSalary": "200.00"
  }, {
    "Row": "3",
    "Emp_Id": "5",
    "Emp_Name": "Murugan",
    "Address": "Madurai",
    "Desig_Name": "Mason",
    "SalaryBasis": "Weekly",
    "FixedSalary": "150.00"
  }, {
    "Row": "4",
    "Emp_Id": "6",
    "Emp_Name": "Ram",
    "Address": "Madurai",
    "Desig_Name": "Mason",
    "SalaryBasis": "Weekly",
    "FixedSalary": "120.00"
  }, {
    "Row": "5",
    "Emp_Id": "7",
    "Emp_Name": "Raja",
    "Address": "Madurai",
    "Desig_Name": "Mason",
    "SalaryBasis": "Weekly",
    "FixedSalary": "135.00"
  }]
}

My inspected through firebug in the json tab i got this

{"Table" : [{"Row" : "1...edSalary" : "135.00"}]}...

Response i got was

{"d":"{\"Table\" : [{\"Row\" : \"1\",\"Emp_Id\" : \"3\",\"Emp_Name\" : \"Jerome\",\"Address\" : \"Madurai\",\"Desig_Name\" : \"Supervisior\",\"SalaryBasis\" : \"Monthly\",\"FixedSalary\" : \"25000.00\"},{\"Row\" : \"2\",\"Emp_Id\" : \"4\",\"Emp_Name\" : \"Mohan\",\"Address\" : \"Madurai\",\"Desig_Name\" : \"Acc \",\"SalaryBasis\" : \"Monthly\",\"FixedSalary\" : \"200.00\"},{\"Row\" : \"3\",\"Emp_Id\" : \"5\",\"Emp_Name\" : \"Murugan\",\"Address\" : \"Madurai\",\"Desig_Name\" : \"Mason\",\"SalaryBasis\" : \"Weekly\",\"FixedSalary\" : \"150.00\"},{\"Row\" : \"4\",\"Emp_Id\" : \"6\",\"Emp_Name\" : \"Ram\",\"Address\" : \"Madurai\",\"Desig_Name\" : \"Mason\",\"SalaryBasis\" : \"Weekly\",\"FixedSalary\" : \"120.00\"},{\"Row\" : \"5\",\"Emp_Id\" : \"7\",\"Emp_Name\" : \"Raja\",\"Address\" : \"Madurai\",\"Desig_Name\" : \"Mason\",\"SalaryBasis\" : \"Weekly\",\"FixedSalary\" : \"135.00\"}]}"}

Any suggestion...

Answer 1

Use jQuery's each method. Docs.

success: function(jsonObj) {

         $.each(jsonObj, function(i, employee) {

            alert(employee.Emp_Name);

         }
}

Also, AFAIK, alert() on its own won't show a JSON structure.

And because it is an object (not an array), I don't think it'll have a length property.

Also, is there any reason you would prefer counting down in that for loop to counting up? It is an optimisation trick?

Update

After seeing some example JSON, i.e.

{
   Table: [
      {
         Row: '1',
         Emp_Id: '3',
         Emp_Name: 'Jerome',
         Address: 'Madurai',
         Desig_Name: 'Supervisior',
         SalaryBasis: 'Monthly',
         FixedSalary: '25000.00'
      },
      {
         Row: '2',
         Emp_Id: '4',
         Emp_Name: 'Mohan',
         Address: 'Madurai',
         Desig_Name: 'Acc ',
         SalaryBasis: 'Monthly',
         FixedSalary: '200.00'
      },
      {
         Row: '3',
         Emp_Id: '5',
         Emp_Name: 'Murugan',
         Address: 'Madurai',
         Desig_Name: 'Mason',
         SalaryBasis: 'Weekly',
         FixedSalary: '150.00'
      },
      {
         Row: '4',
         Emp_Id: '6',
         Emp_Name: 'Ram',
         Address: 'Madurai',
         Desig_Name: 'Mason',
         SalaryBasis: 'Weekly',
         FixedSalary: '120.00'
      },
      {
         Row: '5',
         Emp_Id: '7',
         Emp_Name: 'Raja',
         Address: 'Madurai',
         Desig_Name: 'Mason',
         SalaryBasis: 'Weekly',
         FixedSalary: '135.00'
      }
   ]
}

it would seem you would want to access an employee name like so

 $.each(jsonObj.table, function(i, employee) {

                alert(employee.Emp_Name);

             }

Answer 2

The length property is only available to Array objects.

Json objects, and by extension objects that are accessed as key value pairs have to be iterated using a for loop like this:

for(aProperty in jsonObj)
{
  var employee = jsonObj[aProperty];
  alert(aProperty + " = " + employee);
}

or using the jQuery.each alternative:

jQuery.each(jsonObj, function(key,value))
{
   alert(key + " = " + value);
}

window.alert may not offer the best tools to for debugging and object display. You should try using Firebug.

I'm guessing you want to insert all that html after $('#ResultsDiv');

Try adjusting your code like so:

$.each(jsonObj.Table, function(i, employee) {
 $('<div class="resultsdiv"><br /><span class="resultName">' + employee[i].Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee[i].Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee[i].SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee[i].FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + employee[i].Address + '</span></div>').insertAfter('#ResultsDiv');
 });

It seems like the employee records are contained in one property Table which is what you should be iterating.

Also make sure that $('#ResultsDiv') exists.

Here's a suggestion for your ajax call

$.ajax({
            type: "POST",
            url: "Default.aspx/GetRecords",
            data: "{'currentPage':1,'pagesize':5}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function(jsonObj) {
            var Employees = jsonObj.Table || jsonObj.d.Table;
            for(key in Employees) console.log(Employees);
            }
        })