为什么我不能使用jQuery循环我的json对象?

时间:2010-03-30 04:56:01

标签: jquery json loops

我正在使用jquery循环遍历json对象...但是有些它似乎不起作用...

这是我的代码,

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

当我jsonObj收到[object Object]时收到提醒,但当我收到提醒jsonObj.length时,它显示undefined任何建议....

修改

使用下面的答案我不能迭代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');
 });

我的json对象就是这个,

{"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"}]}

我在json标签中通过萤火虫进行了检查我得到了这个

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

Response我得到了

{"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\"}]}"}

任何建议......

3 个答案:

答案 0 :(得分:5)

使用jQuery的each方法。 Docs

success: function(jsonObj) {

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

            alert(employee.Emp_Name);

         }
}

此外,AFAIK,alert()本身不会显示JSON结构。

因为它是一个对象(不是一个数组),我认为它不会有长度属性。

另外,是否有任何理由你更喜欢倒计时才能循环计数?这是一个优化技巧吗?

更新

看到一些例子JSON,即

{
   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'
      }
   ]
}

看起来您会想要像这样访问员工姓名

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

                alert(employee.Emp_Name);

             }

答案 1 :(得分:1)

长度属性仅适用于数组对象。

Json 对象,以及作为键值对访问的扩展对象必须使用for循环进行迭代:

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

或使用 jQuery.each 替代方案:

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

window.alert 可能无法提供调试和对象显示的最佳工具。 您应该尝试使用Firebug

我猜你想在$('#ResultsDiv')之后插入所有的html;

尝试调整代码:

$.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');
 });

员工记录似乎包含在一个属性中,这是您应该迭代的内容。

还要确保$('#ResultsDiv')存在。

以下是您的ajax电话的建议

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

答案 2 :(得分:0)

对象没有长度。您可以像这样迭代对象的属性:

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