Question

我正在使用jQuery的$ .ajax方法来调用getjson.php，它使用PHPs 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”：“Totals”， “0”：“92,614.45”， “1”：“98,126.78”， “2”：“104,157.04”， “3”：“102,581.87”， “4”：“无”， “5”：“无”， “6”：“无”， “7”：397480.14 }]

我可以使用$（'＃responseDiv'）显示JSON对象.html（结果）; }）; 但我想使用$ .each（）方法解析每一行。

使用$ .each（）迭代JSON对象时，只显示最后一个JSON对象。这将显示最后一个JSON对象 - ＆gt; “7”：397480.14。

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

目标是将JSON对象包装在＆lt; tr>每行的标签和＆lt; td＆gt;用于表格/网格外观的每列的标签。**

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

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

2 个答案: