Need JS to generate table html from JSON

Question

I am looking for a javascript solution to generate an HTML table ( or bootstrap grid layout ) from a data structure.

[
    {"x":0,"y":0,"width":2,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":2,"y":0,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":2,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":2,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":3,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":3,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":4,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":5,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":5,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":6,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":6,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":8,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":9,"width":3,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":10,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":10,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":2,"y":10,"width":1,"height":5,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":11,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":11,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":12,"width":2,"height":2,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":14,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":14,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":2,"y":15,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":16,"width":3,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":17,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":17,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":2,"y":17,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"}
]

Please note that "height" and "width" represent the rowspan and colspan respectively.

Thank you

Edited

My solution so far was to implement the bootstrap grid. Unfortunately it does not take into account the rowspan so it creates a lot of white space.

here is the code

var cell_height = 80;
var $grid = $('<div class="grid"></div>');
var grid_width = 12;
var items = []; //items

var _getBootstrapGridWidth: function(width){
    return Math.round(12/grid_width*width);
};

var _createRow = function(){
    var $row = $('<div class="row grid-row"></div>');
    $row.css('min-height',cell_height);
    return $row;
};

var _fillInEmptyRows = function(current_y,next_y){
    var count = next_y-current_y;
    (count) && (count--); //needs to subtract 1 to adjust
    while (count--){
        $grid.append(_createRow());
    }
};

//lets create the layout
_.each(items,function(item){

    // If y suggests we're on a new row (including the first item), create a new row
    if (item.y!==current.y){
        $row = _createRow();
        _fillInEmptyRows(current.y,item.y);
        $grid.append($row);
        current.y = item.y;
        current.x = 0;
    }

    var $column = $('<div class="grid-item-wrapper"></div>');

    //lets add the data attr
    $column.attr('data-x',item.x).attr('data-y',item.y).attr('data-width',item.width).attr('data-height',item.height);

    //add width class
    $column.addClass('col-sm-'+_getBootstrapGridWidth(item.width));

    //if x is not the same as our current x position, add offset class
    if (item_data.x!==current.x)
        $column.addClass('col-sm-offset-'+_getBootstrapGridWidth(item_data.x-current.x));

    //set height of new div
    $column.css('min-height',cell_height);

    //increment current.x to new starting position
    current.x += (item.x-current.x)+item.width;

    //add the div to the current row
    $column.append($item);
    $row.append($column);
});

http://stackoverflow.com/questions/1051061/convert-json-array-to-an-html-table-in-jquery and http://stackoverflow.com/questions/17066636/parsing-json-objects-for-html-table — SquareCat, Dec 11 '15 at 18:26
First, write the HTML *manually*, from that data. Then try to write JS which follows the same logic you followed manually. Then you will probably have some specific programming problems for which you will seek help on stackoverflow. — zvone, Dec 11 '15 at 18:33
The data is taken from gridstack.js lib that generated the layout. Rowspans and Colspans must be considered. The links above do not address the issue — Art, Dec 11 '15 at 18:57

Shyju · Answer 1 · 2015-12-11T18:40:02.887

1

You may simply loop through the items in your json array and build whatever markup you want. Use $.each for iterating through the items in the array.

 var data =[
             {"x":0,"y":0,"width":2,"height":1,"title":"Lorem ipsum dolor sitamet"},
             {"x":2,"y":0,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"}      

           ];



var tbl="<table>";

 $.each(data,function(index,item){

     tbl+="<tr><td rowspan='"+item.height+"' colspan='"+item.width+"'>"
                                                             +item.title+"</td></tr>";

  });

  tbl+="</table>";

 $("#tblContainer").html(tbl);

Assuming tblContainer is the Id of the container div in your page where you want to display this table.

Here is a sample

edited Dec 11 '15 at 18:40

answered Dec 11 '15 at 18:33

Shyju

214,206
104
411
497

It seems that in your code you are putting one item per TR. That is not what needs to be done. Please read the requirements again. – Art Dec 11 '15 at 19:00
The answer should give you an idea to **HELP YOU TO WRITE THE SOLUTION YOURSELF**. Play with it and you will get to it. – Shyju Dec 11 '15 at 19:01
Please note, I asked for a solution, not an idea to point me in the right direction. I only reached out when i hit a wall. – Art Dec 11 '15 at 19:02

score 1 · Answer 2 · answered Dec 11 '15 at 19:16

Please check if this solves your problem

var tblData = [
    {"x":0,"y":0,"width":2,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":2,"y":0,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":2,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":2,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":3,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":3,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":4,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":5,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":5,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":6,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":6,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":8,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":9,"width":3,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":10,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":10,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":2,"y":10,"width":1,"height":5,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":11,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":11,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":12,"width":2,"height":2,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":14,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":14,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":2,"y":15,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":16,"width":3,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":0,"y":17,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":1,"y":17,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"},
    {"x":2,"y":17,"width":1,"height":1,"title":"Lorem ipsum dolor sit amet"}
];


// Add your javascript here
$(function(){

  var tableTag = "<table border='1'>";
  for(i = 0;i<tblData.length;i++){
      //tableTag+="<tr><td>"+tblData[i].x+"</td><td>"+tblData[i].y+"<td colspan="+tblData[i].width+" rowspan="+tblData[i].height+">"+tblData[i].title+"</td></tr>";
      tableTag+="<tr><td colspan="+tblData[i].width+" rowspan="+tblData[i].height+">"+tblData[i].title+"</td></tr>";
  }

$("#tblid").html(tableTag);
});

http://plnkr.co/edit/YpljIJ6WaX8QOPc2fPPs?p=preview

No, not quite. If you look at first two items you will see that they are both on the same row, but the first item has ***width*** 2 which translates to ***colspan***. — Art, Dec 11 '15 at 19:34
Basically the ***x*** and ***y*** represent the positions of the item on a 12-column grid. So, when ***y*** is the same, it means the items are on the same row. — Art, Dec 11 '15 at 19:37

Need JS to generate table html from JSON

Edited

here is the code

2 Answers2