使用 jQUERY $.each() 迭代返回的 JSON OBJECT答案

【问题标题】：iterating returned JSON OBJECT using jQUERY $.each()使用 jQUERY $.each() 迭代返回的 JSON OBJECT
【发布时间】：2011-11-04 20:26:52
【问题描述】：

我正在使用 jQuery 的 $.ajax 方法调用 getjson.php，它使用 PHP 的 json_encode($data) 返回一个 JSON 对象。我的 JSON 的结构看起来像这样......

[ { "StoreKey": "84", "StoreName": "Region1", “0”：“4,055.37”， “1”：“2,668.29”， “2”：“4,454.81”， “3”：“4,789.99”， “4”：“无”， “5”：“无”， “6”：“无”， “7”：“15,968.46” }, { "StoreKey": "26", "StoreName": "Region2", “0”：“2,368.09”， “1”：“2,270.24”， “2”：“1,806.76”， “3”：“1,656.15”， “4”：“无”， “5”：“无”， “6”：“无”， “7”：“8,101.24” }, { "StoreKey": "每日", "StoreName": "总计", “0”：“92,614.45”， “1”：“98,126.78”， "2": "104,157.04", “3”：“102,581.87”， “4”：“无”， “5”：“无”， “6”：“无”， “7”：397480.14 } ]

我可以使用 $('#responseDiv').html(result); 显示 JSON 对象}); 但我想使用 $.each() 方法解析每一行。

当使用 $.each() 遍历 JSON 对象时，仅显示最后一个 JSON 对象。这将显示最后一个 JSON 对象 -> “7”：397480.14。

var data = $.parseJSON(result);
  $.each(data,function(row,store)  {    
   $.each(store,function(key,value) {
     $('#responseDiv').html(value); 
     });        
  })

目标是将 JSON 对象包装在每行的

标记和每列的标记中，以实现表格/网格外观。**

AJAX 请求函数。

$.ajax  //jQuery Syntax-ajax.api!
  ({
     type: "POST",
     url: "includes/getjson.php", //----my php scripts/codes
     data: "date="+x, 
     datatype: "json",
     success: function(result)
     {
      var data = $.parseJSON(result);
      $.each(data,function(row,store)  {    
        $.each(store,function(key,value) {
            $('#responseDiv').html(value);  });     
           }) 
     }
   }); 
}

这是我没有做或做错的事情......

【问题讨论】：

标签： jquery json iteration

【解决方案1】：

您每次都在替换 #responseDiv 的内容 - 您想追加它

$('#responseDiv').html($('#responseDiv').html() + value);

或者，更短：

$('#responseDiv').append(value);

【讨论】：

【解决方案2】：

如果您尝试创建一个没有基于 json 对象的行的表，我建议您使用像 jTemplate 或 Jquery Template 这样的模板引擎。然后，您只需创建一个您的模板并将您的返回对象发送给它进行渲染。

<!-- Template content --> 
<textarea id="myTemplate" style="display:none"> 

        {#foreach $T as record}
        <tr>
           <td>{$T.record.StoreKey}</td>
           <td>{$T.record.StoreName}</td>
                       <td>{$T.record.0}</td>
        </tr>
        {#/for}
</textarea>

你的 HTML 应该是

<table>
    <tbody id="placeholder">

    </tbody>
</table>

那么您只需将 json 结果发送到模板引擎。

$.ajax  //jQuery Syntax-ajax.api!
  ({
     type: "POST",
     url: "includes/getjson.php", //----my php scripts/codes
     data: "date="+x, 
     datatype: "json",
     success: function(result)
     {
    $("#placeholder").setTemplateElement("myTemplate").processTemplate(result);
     }
   }); 
}

【讨论】：