使用jQUERY $ .each（）迭代返回的JSON对象

Question

我正在使用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” “：” none“，” 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对象包装在表/网格外观的每行<tr>标记和每列的<td>标记中。**

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

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

Answer 1

您每次都要替换#responseDiv的内容-您想附加它

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

或更短：

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

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