从div下的json文件构建表时遇到问题

我需要将相当复杂的JSON数据从（大的）JSON文件获取到页面特定部分的表中。不知怎的，当我运行代码时，什么也没发生

purchase.json文件的快照-

{ “表”：{ “采购”：[ { “名字”：“乔”， “姓氏”：“简森”， “产品”：“上网本电脑”， “价格”：“356”， “购买日期”：“2011年4月4日”， “单位计数”：“1”， “类型”：“计算机”， “归还日期”：“2011年3月5日”， “序号：”“0” }, { “名字”：“克里斯蒂”， “姓氏”：“戴维斯”， “产品”：“iPad”， “价格”：“656”， “购买日期”：“2011年7月4日”， “单位计数”：“1”， “类型”：“计算机”， “归还日期”：“2011年6月5日”， “序号：”“10” }, { “名字”：“贾斯汀”， “姓氏”：“吉尔”， “产品”：“笔记本电脑套”， “价格”：“699”， “购买日期”：“2011年2月4日”， “单位计数”：“1”， “类型”：“计算机资产”， “归还日期”：“2011年1月5日”， “序号：”“20” } ] } }

html文件- JSON到表

获取json文件“purchase.json” 将数组解析到表中，并将其加载到AJAXDiv中 必须从JSON中找到的key:value对中的key中提取表头。

我的JavaScript代码是- $（文档）.ready（函数（）{ //使用AJAX从服务器检索JSON数据 $（“#AJAXButton”）。单击（函数（）{ $.getJSON（'data/purchase.json'，函数（数据）{ processJSON（数据）； }); }))

//处理并显示JSON数据
函数processJSON（jsondata）{
var输出=“”；
//检索键并放入数组中
var keys=objKeys（jsonData.table.loans[0]）.join（“|”）；
var keyData=拆分字符串（键）；
//打印页眉
对于（var i=0；i

---

}))

可能是您缺少了一个变量，但是

function processJSON(jsondata)

但是你以后用

jsonData.table.loans[0] //etc....

---

我建议使用诸如Firebug或DevTools之类的调试器，这样可以更容易地捕获此类问题。

您也可以使用此库：

我使用我自己编写的脚本，它确实可以从mysql结果构建任何json表 o无论MySQL输出什么，您都可以按照输出顺序使用自己的标签重命名列名。此外，如果不提供，将生成默认名称。 它使用$post Jquery插件，您可以轻松地添加一行代码

您所需要的只是带有表_结果的div：

  function dyna_query(label){

        $.post("your_mysql_query.php",{post_limit:15},function(e){
        if(e=="fail"|| e=="" ||e=="[]"){return;}


        var obj=JSON.parse(e);
        //get default column names based on the associative object JSON
    var column_n=Object.keys(obj[0]).length/2;
    var c_names=Object.keys(obj[0]).splice(column_n,column_n);
        //if there are labels, then these will replace others.

      if( label){c_names=label.split(",");}

        var table_row="";
        //initialize table 
        var table_format="<table  border=0><tr>"; 

      for(var r=0; r<c_names.length;r++){
        table_row+="<td class=table_h>"+c_names[r]+"</td>";}
        table_row+="</tr>";

      for(var i=0; i<obj.length;i++){table_row+="<tr>";
      for(var c=0; c<c_names.length;c++){table_row+="<td class='table_bb'>"+obj[i][c]+"     </td>";}table_row+="</tr>";}

        //get all the other fields and rows
        table_format+=table_row+"</table>";
        //buld the html for the div with the id table_result
        $("#table_result").html(table_format);

    });
    }

函数动态查询（标签）{
$.post（“your_mysql_query.php”，{post_limit:15}，函数（e）{
如果（e==“fail”| | e==“| | e==”[]）{return；}
var obj=JSON.parse（e）；
//基于关联对象JSON获取默认列名
var column\u n=Object.keys（obj[0]）.length/2；
var c_names=Object.keys（obj[0]）.splice（column，column）；
//如果有标签，则这些标签将替换其他标签。
如果（label）{c_names=label.split（“，”；}
var表_行=”；
//初始化表
var表_格式=”；
对于（var r=0；rcan），可以进行一些调试，以查看变量“output”在processJSON方法末尾的值是多少？在$（'#AJAXDiv'）.html（output）；？感谢您发现错误。它应该是jsonData.table.purchases[0]。数组以{“table”：{“purchases”：[{“First Name”：“Joe”开头，…我想要第一个购买记录中的键，而不是digitalFresh。更改为jsondata.table.purchases[0]后。该表生成得非常完美。我面临的下一个挑战是如何为此表运行jQuery插件以实现特殊功能，例如条带表、固定标题等？此代码无效-$（文档）。就绪（函数（）{$（'#AJAXButton'）。单击（函数（）{$.getJSON（'data/purchase.json'，函数（data）{processJSON（data）；}}）；$（'#示例'）。数据表（{“sScrollY”：“200px”，“bPaginate”：false}）；
  function dyna_query(label){

        $.post("your_mysql_query.php",{post_limit:15},function(e){
        if(e=="fail"|| e=="" ||e=="[]"){return;}


        var obj=JSON.parse(e);
        //get default column names based on the associative object JSON
    var column_n=Object.keys(obj[0]).length/2;
    var c_names=Object.keys(obj[0]).splice(column_n,column_n);
        //if there are labels, then these will replace others.

      if( label){c_names=label.split(",");}

        var table_row="";
        //initialize table 
        var table_format="<table  border=0><tr>"; 

      for(var r=0; r<c_names.length;r++){
        table_row+="<td class=table_h>"+c_names[r]+"</td>";}
        table_row+="</tr>";

      for(var i=0; i<obj.length;i++){table_row+="<tr>";
      for(var c=0; c<c_names.length;c++){table_row+="<td class='table_bb'>"+obj[i][c]+"     </td>";}table_row+="</tr>";}

        //get all the other fields and rows
        table_format+=table_row+"</table>";
        //buld the html for the div with the id table_result
        $("#table_result").html(table_format);

    });
    }