logo标签列表

为什么我不能使用jQuery循环遍历我的json对象？

javascriptjqueryjsonloops
3
我将使用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。有什么建议吗？ 编辑： 使用下面的答案，我无法遍历
。
$.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"
  }]
}

我在Firebug的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\"}]}"}

有什么建议可以改善我们的IT技术吗？

如果您能展示一个jsonObj的例子，这可能会更容易些。 - Val
3个回答
5
使用jQuery的each方法。 文档。
success: function(jsonObj) {

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

            alert(employee.Emp_Name);

         }
}

此外，据我所知，仅使用alert()无法显示JSON结构。

由于它是一个对象（而不是数组），我认为它不会有一个长度属性。

另外，你是否有任何理由更喜欢在for循环中倒数而不是正数？这是一种优化技巧吗？

更新

在看到一些示例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);

             }
@alex employee.Emp_Name 是 undefined。 - ACP
@alex 倒计时是通过将我的 JSON 迭代到 div 中，然后使用 insertafter 插入一个 div 实现的。这将根据我的数据表格排列 div。 - ACP
@alex 我使用了你的代码，但仍然出现错误 alert(employee.Emp_Name) 是 undefined。 - ACP
@alex 我的服务器端 JSON 字符串就是我发布的那个... 但是仍然出现相同的未定义错误... - ACP
你的JSON在新的更新中有点奇怪。看起来你需要评估(eval()) jsonObj.d。 - alex
显示剩余4条评论
1

length 属性仅适用于 Array 对象。

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);
            }
        })
@Olaseni jquery.each 可以解决问题。但是如何在此循环中迭代我在问题中的 div... - ACP
请注意，在JavaScript中使用for in时，由于原型继承的存在，在某些情况下您可能会遍历更多的内容。这就是hasOwnProperty()可以帮助解决的问题。 - alex
@Olaseni，请看我的编辑，特别是我在屏幕底部通过Firebug检查得到的“response”信息。 - ACP
@Pandiya 你是在使用特定于json的方法，比如$.getJSON吗？还是在使用$.get或者$.post？ - Olaseni
@Pandiya，您不需要使用eval，因为在ajax调用中已经通过指定dataType: json来完成了。请查看我的编辑。请尝试以下代码：var Employees = jsonObj.Table || jsonObj.d.Table;请参考上面的完整代码片段。 - Olaseni
0

对象没有长度。您可以像这样遍历对象的属性：

success: function(jsonObj) {
         alert(jsonObj);
         for (i in jsonObj) {
             var employee = jsonObj[i];
             alert(employee.Emp_Name);
@kkyy employee.Emp_Name 是 undefined。 - ACP
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接