Convert json data to HTML table

Question

I have an array of data in php and I need to display this data in an HTML table. Here's what an example dataset looks like.

Array(
  Array
  (
     [comparisonFeatureId] => 1182
     [comparisonFeatureType] => Category
     [comparisonValues] => Array
                 (
                 [0] => Not Available
                 [1] => Standard
                 [2] => Not Available
                 [3] => Not Available
                 )
    [featureDescription] => Rear Seat Heat Ducts
),)

The data set is a comparison of 3 elements (shown in the index of comparison of array values)

In the end I need a series to look something like this

<tr class="alt2 section_1"> 
   <td><strong>$record['featureDescription']</strong></td> 
   <td>$record['comparisonValues'][0]</td> 
   <td>$record['comparisonValues'][1]</td> 
   <td>$record['comparisonValues'][2]</td> 
   <td>$record['comparisonValues'][3]</td> 
</tr>   

The problem I am facing is how best to do this. Should I create the whole HTML table on the server side, pass it through an ajax call and just dump the preprocessed HTML data into a div or pass the json data and display the table on the client side.

Any nifty suggestions?

Answer 1

. , :

• -? HTML , JSON.

• CPU -? HTML DOM innerHTML.

• -? "" HTML . , XML JSON, ( ).

JSON JS/jQuery .

---

:, , JSON

var json = {"features": [{
    "comparisonFeatureId": 1182,
    "comparisonFeatureType": "Category",
    "comparisonValues": [ "Not Available", "Standard", "Not Available", "Not Available" ],
    "featureDescription": "Rear Seat Heat Ducts"
}, {
    "comparisonFeatureId": 1183,
    "comparisonFeatureType": "Category",
    "comparisonValues": [ "Not Available", "Standard", "Not Available", "Not Available" ],
    "featureDescription": "Some Description"
}]};

,

<table id="table"></table>

jQuery script, ,

$.each(json.features, function(i, feature) {
    var row = $('<tr class="alt2 section_1">').appendTo($('#table'));
    row.append($('<td>').append($('<strong>').text(feature.featureDescription)));
    $.each(feature.comparisonValues, function(j, comparisonValue) {
        row.append($('<td>').text(comparisonValue));
    });
});

Answer 2

dnaluz,

, , thios. , json- , lib .

, , - , json:

function CreateTableFromJson(objArray) {
    // has passed in array has already been deserialized
    var array = typeof  objArray != 'object' ? JSON.parse(objArray) : objArray;

    str = '<table class="tableNormal">';
    str += '<tr>';
    for (var index in array[0]) {
        str += '<th scope="col">' + index + '</th>';
    }
    str += '</tr>';
    str += '<tbody>';
    for (var i = 0; i < array.length; i++) {
        str += (i % 2 == 0) ? '<tr class="alt">' : '<tr>';
        for (var index in array[i]) {
            str += '<td>' + array[i][index] + '</td>';
        }
        str += '</tr>';
    }
    str += '</tbody>'
    str += '</table>';
    return str;
}

, - .

[edit] - : http://www.zachhunter.com/2010/04/json-objects-to-html-table/

Answer 3

JSON - . - .

, extJS - .

Answer 4

.

, ... , ( ) . , , .