title: How to create HTML table in four columns using JSON data?
body: <p>I have an HTML table which I am rendering with <code>JSON</code> data, according to My requirement I have to show Data in 4 columns what ever the size of data is</p>
  
  <p><strong>Issue</strong></p>
  
  <p>when my data.length is equally divided by 4 then it is showing two rows of four columns, But when it length is 6 then it is showing two rows of 3-3 columns which is not correct, If i have data having length of 5 then it is showing only 4 Items not the fifth one, I don't know what blunder I am making</p>
  
  <p><strong>My code</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var tableValue = [{
    "Item Name": "JACK DANIELS 30",
    "Quantity": 292
  }, {
    "Item Name": "JACK DANIELS 750",
    "Quantity": 731
  }, {
    "Item Name": "JAMESON 30",
    "Quantity": 202
  }, {
    "Item Name": "JAMESON 750",
    "Quantity": 49
  }, {
    "Item Name": "JIM BEAM WHITE 750",
    "Quantity": 409
  }]
  
  function addTable(tableValue) {
    var $tbl = $("&lt;table /&gt;", {
        "class": "table table-striped table-bordered table-hover "
      }),
  
      $tb = $("&lt;tbody/&gt;"),
      $trh = $("&lt;tr/&gt;");
  
  
    var split = Math.round(tableValue.length / 4); // here i Think some issue
    console.log(split)
    for (i = 0; i &lt; split; i++) {
      $tr = $("&lt;tr/&gt;", {
        "class": "filterData"
      });
      for (j = 0; j &lt; 4; j++) {
        $.each(tableValue[split * j + i], function(key, value) {
  
          $("&lt;td/&gt;", {
            "class": "text-left color" + (j + 1)
          }).html(value).appendTo($tr);
  
        });
      }
      $tr.appendTo($tb);
    }
    $tbl.append($tb);
    $("#DisplayTable").html($tbl);
  
  
  }
  addTable(tableValue);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.color1 {
    background: #4AD184;
  }
  
  .color2 {
    background: #EA69EF;
  }
  
  .color3 {
    background: #E1A558;
  }
  
  .color4 {
    background: #F4F065;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
  &lt;div id="DisplayTable"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here In my JSON I have total <code>Items</code> but it is showing only 4, I have commented the line where I think issue is in my Code</p>