通过 http get 从返回的 JSON 对象在 javascript 中创建一个表答案

【问题标题】：Create a table in javascript from returned JSON object by http get通过 http get 从返回的 JSON 对象在 javascript 中创建一个表
【发布时间】：2014-05-23 11:51:50
【问题描述】：

这是我的 javascript 中的函数。由另一个函数的 onclick 函数触发。

    function getValueUsingParentTag(){

        var tv_type = [];
        var screen_size = [];
        var connectivity = [];
        var features = [];
        var chkArray = [tv_type,screen_size,connectivity,features];

        $("#tvtype input:checked").each(function() {
            tv_type.push($(this).val());
        });
        $("#screensize input:checked").each(function() {
            screen_size.push($(this).val());
        });
        $("#connection input:checked").each(function() {
            connectivity.push($(this).val());
        });
        $("#feature input:checked").each(function() {
            features.push($(this).val());
        });

        console.log(chkArray);
        //alert(JSON.stringify(chkArray));      
     alert('hello');

     $.get("output-tv.php",{tv_type:tv_type,screen_size:screen_size,connectivity:connectivity,features:features},function(chkArray){

        });
}

这是返回的示例 json 对象

 {"result":[
  {"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
  {"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
 ]}

我需要根据返回的 json 对象在 javascript 中创建一个表。我不知道怎么做。请帮忙。

【问题讨论】：

编写一个循环，将 $("<tr>") 和 $("<td>") 元素与从结果中填充的值一起追加。
我不敢相信你学习 jQuery 的教程没有任何使用它创建表的示例。

标签： javascript jquery arrays json multidimensional-array

【解决方案1】：

以下函数以字符串形式构建表格。

function getTable(data) {
    var html = "";
    html += "<table><tr><td>product_code</td><td>tv_name</td><td>size</td><td>tv_type</td></tr>";
    html += "<tr>";
    for(var i = 0, ceiling = data.result.length; i < ceiling; i++) {
        var row = data.result[i];
        html += "<td>" + row.product_code + "</td>";
        html += "<td>" + row.tv_name + "</td>";
        html += "<td>" + row.size + "</td>";
        html += "<td>" + row.tv_type + "</td>";
    }
    html += "</tr>";
    html += "</table>";
    return html;
}

假设您有一个 id 为 mydiv 的 div，您可以使用以下代码将表格添加到该 div：

document.getElementById("mydiv").innerHTML = getTable(data);

【讨论】：

天花板是什么意思？我不断收到未定义的数据。
你应该将你的 json 对象传递给这个函数；上限是 json 对象中结果数组的长度。它用于在应该结束的时候结束循环。

【解决方案2】：

这是一个简单的仅 Javascript 循环示例：

http://jsfiddle.net/mCLVL/

 var tableData = {"result":[
  {"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
  {"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
 ]};

var tableHTML = "<table>";

for (var i = 0; i < tableData["result"].length; i++) {
 tableHTML += "<tr>";
 tableHTML += "<td>" + tableData["result"][i]["product_code"] + "</td>";
 tableHTML += "<td>" + tableData["result"][i]["tv_name"] + "</td>";
 tableHTML += "<td>" + tableData["result"][i]["size"] + "</td>"; 
 tableHTML += "<td>" + tableData["result"][i]["tv_type"] + "</td>";
 tableHTML += "</tr>";  
}

tableHTML += "</table>";

console.log(tableHTML);

【讨论】：

【解决方案3】：

使用JSRender 将变得如此简单。我用jsrender模板做了一个小提琴检查它。

Using JSRender Fiddle

【讨论】：