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

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

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

Share edited Jan 3, 2020 at 12:54 Mickael Lherminez 6951 gold badge11 silver badges30 bronze badges asked Mar 30, 2010 at 4:56 ACP 35.3k101 gold badges233 silver badges373 bronze badges

This might be easier if you would also show us an example jsonObj – Val Commented Mar 30, 2010 at 5:25

Add a ment |

3 Answers 3

Sorted by: Reset to default 5

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

             }

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

Objects don't have a length. You can iterate through object's properties like this:

success: function(jsonObj) {
         alert(jsonObj);
         for (i in jsonObj) {
             var employee = jsonObj[i];
             alert(employee.Emp_Name);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Why can't I loop through my json object using jQuery? - Stack Overflow

3 Answers 3

Update

与本文相关的文章

评论列表(0)