Dynamically generate bootstrap grid HTML from JSON object using Javascript

Question

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>

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

Do you really need a RowSpan? You could just make an optional Children property and add a conditional nested for loop for them to keep the structure same as the required output. — j0ste
– j0ste, Commented Nov 6, 2020 at 15:59

Fabio Lopez · Accepted Answer · 2020-11-06 16:18:39Z

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/

Collectives™ on Stack Overflow

Dynamically generate bootstrap grid HTML from JSON object using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related