麻烦建立一个表从json文件下的div

Question

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

购买快照。Json文件-

{"表":{"购买":(｛"名字":"乔"，"姓":"简森"，"产品":"上网本";"价格":"356","购买日期":"04/04/2011"，"单位计数":"1"，"类型":"计算机","回归日期":"05/03/2011"，"Seq。不。":"0"}，｛"名字":"Christy"，"姓":"戴维斯"，"产品":"iPad","价格":"656","购买日期":"04/07/2011"，"单位计数":"1"，"类型":"计算机","回归日期":"05/06/2011"，"Seq。不。":"10"}，｛"名字":"贾斯汀"，"姓":"吉尔"，"产品":"笔记本电脑套";"价格":"699","购买日期":"04/02/2011"，"单位计数":"1"，"类型":"计算机评估";"回归日期":"05/01/2011"Seq。不。":"20"}］}}

html文件-JSON到表

获取json文件"purchase.json"

将数组解析为一个表并加载到AJAXDiv

表头必须从JSON中找到的key:value对中的键中提取。

我的JavaScript代码是-$(文档)时函数(){//使用AJAX从服务器检索JSON数据$ (' # AJAXButton ') .click(函数(){美元.getJSON("数据/购买。Json '， function(data) {processJSON(数据);}）;});

//Process and display the JSON data
function processJSON(jsondata) {
    var output = '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"><thead><tr>';
    // retrieve the keys and place into an array
    var keys = objKeys(jsonData.table.loans[0]).join("|");          
    var keyData = splitString(keys);
    // print header
    for (var i = 0; i < keyData.length; i++)
    {
        output += "<th>" + keyData[i] + "</th>"; 
    }           
    output += "</thead></tr><tfoot>";
    // print footer
    for (var i = 0; i < keyData.length; i++)
    {
        output += "<th>" + keyData[i] + "</th>"; 
    }   
    output += "</tfoot></tr><tbody>";   
    // print content of the json array in tbody
    for(var j=0, jj = jsonData.table.loans.length; j < jj; j++)
    {
        for (var k = 0, kk = keyData.length; k < kk; k++)
        {
            var current = keyData[k];
            output +="<td>" + jsonData.table.loans[j][current] + "</td>"; 
        }
        output += "</tr>";
    }
    output += "</tbody></tr></table>";
    //Loop through the Languages 
    $('#AJAXDiv').html(output);
}

// get json keys
function objKeys(obj) 
{
    var keys = [];
    var i = 0;
    for (var z in obj) 
    {
        if (obj.hasOwnProperty(z)) {
            keys[i++] = z;
        }
    }
    return keys;
}
// split string into array
function splitString(myString)
{
    var mySplitResult = myString.split("|");
    return mySplitResult;
}

});

Answer 1

这可能是你有一个变量丢失，有

function processJSON(jsondata)

但是你后来用

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

我建议使用像Firebug或DevTools这样的调试器，它使这样的问题更容易捕获。

Answer 2

你也可以使用这个库:

Answer 3

我使用这个脚本，我自己编码，它真的从mysql结果构建任何json表不管MySQL输出什么，你都可以根据输出顺序用你自己的标签重命名列名。同样，如果您不指定，则将生成默认名称。它使用$post Jquery插件，你可以很容易地添加一行代码。

你所需要的是div与table_result:

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

现在简单地调用dyna_query("c1, c2, c3");//重命名默认列名或dyna_query ();对于带有默认标签