Create a table in javascript from returned JSON object by http get

Question

This is the function in my javascript. Triggered by an onclick function by an another function.

    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){

        });
}

This is the sample json object returned

 {"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"}
 ]}

I need to create a table in javascript based on the json object returned. I dont know how. Please Help.

Answer 1

following function builds the table in a string.

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

suppose you have a div with id mydiv, you can add the table to this div with following code:

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

Answer 2

Here's a simple Javascript only loop example:

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

Answer 3

It will be so simple by using JSRender . I made a fiddle using jsrender template check it.

Using JSRender Fiddle