Dynamically generate bootstrap grid HTML from JSON object using Javascript

user_14591386 0
Viewed 418

I am trying to generate an HTML from a JSON object. Please have a look at my required output HTML and JSON below

Required generated HTML

<div class="container">
  <div class="row">
    <div class="col col-sm-5">Span 5</div>
    <div class="col col-sm-3">Span 3</div>
    <div class="col col-sm-2">
      <div class="col col-sm-12">Span 2</div>
      <div class="col col-sm-12">Span 2</div>
    </div>
  </div>
</div>

enter image description here

JSON

    [
               {
                    "Name": "span5",
                    "RowSpan":2,
                    "ColSpan": 5
                },
                {
                    "Name": "span3",
                    "RowSpan": 2,
                    "ColSpan": 3
                },
                {
                    "Name": "span2",
                    "RowSpan": 1,
                    "ColSpan": 2
                },
                {
                    "Name": "span2",
                    "RowSpan": 1,
                    "ColSpan": 2
                }
   ]

The code which I tried is below, which is not working as expected, I am able to implement colspan but, I am not sure how do I implement rowspan. The last span2 cell should come below third span2 cell and that way first and second cells should occupie two rows as their rowspan is 2

https://jsfiddle.net/v1mzn6bu/

HTML

<div class="container">
  <div id="replica" class="row">

  </div>
</div>

Javascript

var replica = document.getElementById('replica');
for(var i = 0; i < json.length; i++) {
    replica.innerHTML += '<div class="col col-sm-' + json[i].ColSpan + '">' + json[i].Name + '</div>';
}

enter image description here

responsive-design bootstrap-4 twitter-bootstrap dynamic-html javascript
1 Answers

It seems to do the structure you want you'll need to nest two cols inside another one

I'ld advise you to make your JSON structure accordingly, something like

var json = [         {
                    "Name": "span5",
                    "ColSpan": 5
                },
                {
                    "Name": "span3",
                    "ColSpan": 3
                },
                {
                    "Name": "span2",
                    "ColSpan": 2,
                    "children":[
                      {
                          "Name": "span2",
                          "ColSpan": 12
                      },
                      {
                          "Name": "span2",
                          "ColSpan": 12
                      }
                    ]
                }
];

It's worth noting that you'll need a "children" attribute to make the smaller span2 divs on the right, so inside the javascript you'll need to navigate it (reduce function may help):

var replica = document.getElementById('replica');
var str  = "";
for(var i = 0; i < json.length; i++) {
    str += '<div class="col col-sm-' + json[i].ColSpan + '">' + (json[i].children ? 
  json[i].children.reduce((acc,child) =>(acc + '<div class="col col-sm-' + child.ColSpan +'">' + child.Name + '</div>'),"" ) 
  : json[i].Name) + '</div>';
}
replica.innerHTML = str;

I forked your JSFiddle here: https://jsfiddle.net/s4vtyek2/

user_141725780
Related