获取json文件“purchase.json”

Question

我需要将（大）JSON文件中的JSON数据复杂化到页面特定部分的表中。不知何故，当我运行我的代码时，没有任何反应。

快照拍摄purchase.json文件 -

{ “table”：{ “购买”：[ { “名字”：“乔”， “姓氏”：“简森”， “产品”：“上网本电脑”， “价格”：“356”， “购买日期”：“04/04/2011”， “单位数”：“1”， “类型”：“电脑”， “返回日期”：“05/03/2011”， “Seq.No。”：“0” }， { “名字”：“克里斯蒂”， “姓氏”：“戴维斯”， “产品”：“iPad”， “价格”：“656”， “购买日期”：“04/07/2011”， “单位数”：“1”， “类型”：“电脑”， “退货日期”：“05/06/2011”， “Seq.No。”：“10” }， { “名字”：“贾斯汀”， “姓氏”：“吉尔”， “产品”：“笔记本电脑套”， “价格”：“699”， “购买日期”：“04/02/2011”， “单位数”：“1”， “类型”：“计算机评估”， “返回日期”：“05/01/2011”， “Seq.No。”：“20” } ] } }

html文件 - JSON到表

获取json文件“purchase.json”

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

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

我的JavaScript代码是 - $（document）.ready（function（）{ //使用AJAX从服务器检索JSON数据 $（'＃AJAXButton'）。click（function（）{ $ .getJSON（'data / purchase.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

您也可以使用此库：Json-To-Html-Table

Answer 3

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

你需要的只是带有table_result的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);

    });
    }

现在只需调用dyna_query（“c1，c2，c3”）; //重命名默认列名要么 dyna_query（）;用于带有默认标签的完整输出

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

获取json文件“purchase.json”

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

3 个答案: