Most efficient way of populating a bidimensional HTML table from JSON data

[didinadeen]

I'm trying to populate a multidimensional html table with data from a JSON. The idea is that the first row is with the dates and the next ones start with with the name of the value and for the value for the date in the first row. Just like and x-y kind of table.

This is an example of my data:

{"dataval": [ 
    {
       "date":"2014-01-01 00:00:00",
       "value":25776510,
       "name":"ISLA--T"
    },
    {
        "date":"2014-01-01 00:00:00",
        "value":789,
        "name":"ISLA--Total"
    },
    {
        "date":"2014-01-01 00:00:00",
        "value":0,
        "name":"SLA-TSis"
    },
    {
        "date":"2014-01-01 00:00:00",
        "value":0,
        "name":"PServSLA-CdS"
     }
]}

This is what I want to achieve:

<table style="width:100%">
  <tr>
    <th></th>
    <th>date</th>        
    <th>date</th>
  </tr>
  <tr>
    <th>value name</th>
    <td>value</td>      
    <td>value</td>
  </tr>
  <tr>
    <th>value name</th>
    <td>value</td>      
    <td>value</td>
  </tr>
</table>

I've tried many different approaches, so I won't copy here all the different solutions I've tried, I rather explain them a bit, as I don't to correct my code as such, although I will publish my last approach if it's needed.

I've tried iterating through the json in frontend, making the table with jQuery but I just couldn't make the values match with their corresponding name and date.

I've tried formatting the json in backend and then looping through it in frontend, but again the values wouldn't match. If I didn't have a value for one value-name the values would go to another value-name, etc.

Thanks in advanced!

[panduranga_1]

Have you used JSON.stringify
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify

try like this

$.ajax({
    url: '/echo/json/',
    type: "post",
    dataType: "json",
    data: {
        json: JSON.stringify([
            {
            id: 1,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 2,
            firstName: "David",
            lastName: "Bowie"}
        ]),
        delay: 3
    },
    success: function(data, textStatus, jqXHR) {
        // since we are using jQuery, you don't need to parse response
        drawTable(data);
    }
});

function drawTable(data) {
    for (var i = 0; i < data.length; i++) {
        drawRow(data[i]);
    }
}

function drawRow(rowData) {
    var row = $("<tr />")
    $("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.firstName + "</td>"));
    row.append($("<td>" + rowData.lastName + "</td>"));
}

orignial code
http://jsfiddle.net/mjaric/sewm6/

You can change the drawtable function etc, according your need.