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

             }