ansaurus

Question

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

Answer 1

+5 A:

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

             }

alex 2010-03-30 05:01:21

@alex look at my edit...

Pandiya Chendur 2010-03-30 05:08:41

@alex `employee.Emp_Name` is `undefined`

Pandiya Chendur 2010-03-30 05:12:33

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

Pandiya Chendur 2010-03-30 05:15:19

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

alex 2010-03-30 05:25:18

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

Pandiya Chendur 2010-03-30 05:33:14

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

Pandiya Chendur 2010-03-30 05:40:26

@alex look at my edit and see the bottom of my question about the `response` i received...

Pandiya Chendur 2010-03-30 05:43:29

Your JSON is a bit weird in that new update. It looks like you'll need to evaluate (`eval()`) `jsonObj.d`

alex 2010-03-30 05:44:15

@alex eval also doesn't seem to work....`var jsob = eval('(' + jsonObj.d + ')');` `alert(jsob);` `$.each(jsob, function(i, employee) {` `alert(employee.Emp_Name);`

Pandiya Chendur 2010-03-30 05:48:41

@alex i got it working now... `var jsob = jQuery.parseJSON(jsonObj.d);`

Pandiya Chendur 2010-03-30 06:25:45

@Pandiya Glad you got it working

alex 2010-03-30 08:57:22

Answer 2

A:

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

kkyy 2010-03-30 05:02:58

@kkyy `employee.Emp_Name` is `undefined`

Pandiya Chendur 2010-03-30 05:12:02

Answer 3

+1 A:

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

Olaseni 2010-03-30 05:15:50

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

Pandiya Chendur 2010-03-30 05:21:07

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.

alex 2010-03-30 05:26:27

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

Pandiya Chendur 2010-03-30 05:44:31

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

Olaseni 2010-03-30 05:53:24

@Olaseni see my question at the top..

Pandiya Chendur 2010-03-30 05:57:59

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

Olaseni 2010-03-30 06:27:24

@olaseni i parsed my json with jquery that did the trick...

Pandiya Chendur 2010-03-30 06:31:17

ansaurus

tags:

views:

answers:

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

Update

related questions