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

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

alex · Accepted Answer · 2010-03-30 05:36:14Z

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

             }

edited Mar 30, 2010 at 5:36

answered Mar 30, 2010 at 5:01

alex

492k205 gold badges890 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

ACP Over a year ago

@alex employee.Emp_Name is undefined

ACP Over a year ago

@alex counting down is iterating my json through divs and i am insertafter a div.. This would arrange the div as by my datatable

alex Over a year ago

@Pandiya You're not using the correct code. You're trying to access an element with [i], but jQuery makes the iteration available through the employee object.

ACP Over a year ago

@alex i have used your code still i get the error alert(employee.Emp_Name) is undefined

ACP Over a year ago

@alex my server side json string was the one i posted... But still same undefined error...

|

Olaseni · Accepted Answer · 2010-03-30 06:28:58Z

1

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

edited Mar 30, 2010 at 6:28

answered Mar 30, 2010 at 5:15

Olaseni

7,94617 gold badges47 silver badges68 bronze badges

5 Comments

ACP Over a year ago

@Olaseni jquery.each does the trick.. But how to iterate my div which is in my question inside this loop...

alex Over a year ago

Note that when using for in in JavaScript, in certain cases you'll iterate through more than you like (because of prototypal inheritance). This is where hasOwnProperty() can help.

ACP Over a year ago

@Olaseni see my edit and especially my bottom of the screen response i received by inspecting through firebug...

Olaseni Over a year ago

@Pandiya Are you using json specific methods i.e. $.getJSON? Or are you using $.get, or $.post?

Olaseni Over a year ago

@Pandiya You don't need to eval, jQuery already done that by specifying - dataType: json in the ajax call. See my edits Try these: var Employees = jsonObj.Table || jsonObj.d.Table; See my full code excerpt above

kkyy · Accepted Answer · 2010-03-30 05:02:58Z

0

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

answered Mar 30, 2010 at 5:02

kkyy

12.5k3 gold badges34 silver badges27 bronze badges

1 Comment

ACP Over a year ago

@kkyy employee.Emp_Name is undefined

Collectives™ on Stack Overflow

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

3 Answers 3

Update

9 Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Update

9 Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related