Как создать таблицу HTML в четыре столбца, используя данные JSON?

Question

У меня есть HTML-таблица, которую я отображаю с данными JSON, в соответствии с Моим требованием, я должен показывать Данные в 4 столбцах независимо от того, какой размер данных равен

Выпуск

когда моя data.length делится поровну на 4, тогда он показывает две строки из четырех столбцов, но когда его длина равна 6, тогда он показывает две строки из 3-3 столбцов, что неверно. Если у меня есть данные, имеющие длина 5, тогда он показывает только 4 элемента, а не пятый, я не знаю, какую ошибку я совершаю

Мой код

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 = $("<table />", {
      "class": "table table-striped table-bordered table-hover "
    }),

    $tb = $("<tbody/>"),
    $trh = $("<tr/>");


  var split = Math.round(tableValue.length / 4); // here i Think some issue
  console.log(split)
  for (i = 0; i < split; i++) {
    $tr = $("<tr/>", {
      "class": "filterData"
    });
    for (j = 0; j < 4; j++) {
      $.each(tableValue[split * j + i], function(key, value) {

        $("<td/>", {
          "class": "text-left color" + (j + 1)
        }).html(value).appendTo($tr);

      });
    }
    $tr.appendTo($tb);
  }
  $tbl.append($tb);
  $("#DisplayTable").html($tbl);


}
addTable(tableValue);

.color1 {
  background: #4AD184;
}

.color2 {
  background: #EA69EF;
}

.color3 {
  background: #E1A558;
}

.color4 {
  background: #F4F065;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="DisplayTable"></div>

Здесь В моем JSON у меня всего Items, но он показывает только 4, я прокомментировал строку, где я думаю, что проблема в моем коде

Answer 1

Ваш первый цикл выполняется в 1 раз меньше, чем вы хотите, и я не уверен, как работает ваш второй цикл. Измените его на:

    for (i = 0; i <= split; i++) { // changed this
      $tr = $("<tr/>", {
        "class": "filterData"
      });
      for (j = 0; j < 4; j++) { 
        $.each(tableValue[(i*4) + j], function(key, value) { // changed this
            console.log(j)
          $("<td/>", {
            "class": "text-left color" + (j + 1)
          }).html(value).appendTo($tr);

        });
      }

Answer 2

Я бы упростил это и сделал бы так:

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(data, columns = 4, container = "#DisplayTable") {
    var tableHtml = '';
    tableHtml += '<table class="table table-striped table-bordered">';
    tableHtml += '	<tbody>';

    var totalRows = Math.ceil(data.length / columns);
    for (let i = 0; i < totalRows; i++) {
        tableHtml += '		<tr>';
        for (let j = 0; j < columns; j++) {
            let dataIndex = i * columns + j;
            if (typeof data[dataIndex] != 'undefined') {
                tableHtml += '		<td class="text-left color' + (j + 1) + '">' + data[dataIndex]["Item Name"] + '</td>';
                tableHtml += '		<td class="text-left color' + (j + 1) + '">' + data[dataIndex]["Quantity"] + '</td>';
            } else {
                tableHtml += '		<td class="text-left color' + (j + 1) + '"></td>';
                tableHtml += '		<td class="text-left color' + (j + 1) + '"></td>';
            };
        };
        tableHtml += '		</tr>';
    };

    tableHtml += '	<tbody>';
    tableHtml += '</table>';
    $(container).html(tableHtml);
};
addTable(tableValue);

.color1 {
    background: #4AD184;
}

.color2 {
    background: #EA69EF;
}

.color3 {
    background: #E1A558;
}

.color4 {
    background: #F4F065;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="DisplayTable"></div>

Также на JSFiddle .

Answer 3

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
}, {
  "Item Name": "JAMESON 750",
  "Quantity": 49
}, {
  "Item Name": "JIM BEAM WHITE 750",
  "Quantity": 409
}]

function addTable(tableValue) {
   var  container =  $( "#DisplayTable" );     
   $.each(tableValue, function(key, value) {       
     
      var item = $('<div />', { 'class': 'item' }).appendTo(container);
      var Name = $('<div />', { 'text': value["Item Name"]}).appendTo(item);
       var Quantity = $('<div />', { 'text': value["Quantity"],'class':'count'}).appendTo(item);   
     
       
  });
    
}

$( document ).ready(function() {
 addTable(tableValue);
});

#DisplayTable{

display:grid;
grid-template-columns: auto auto auto auto;



}
.item{
border:1px solid white;
display:flex;
align-items:center;
padding:10px;
border-radius:3px;
background:yellow;
color:#fff;
} 
.count{
font-weight:500;
font-size:3em;
}
.item:nth-child(4n-7) {
  background-color:green;
}

.item:nth-child(4n-6) {
  background-color:red;
}

.item:nth-child(4n-5) {
   background-color:blue;
}

.item:nth-child(4n-4) {
   background-color:black; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.2/jquery.min.js"></script>
<div id="DisplayTable"></div>

Используйте Grid и flex вместо таблицы. Если вы хотите избежать Grid, используйте количество столбцов. Смотрите фрагмент.

Answer 4

Каждый объект в массиве имеет 4 записи, поэтому для заполнения 4 столбцов каждый объект заполнит строку столбцами 1 и 3, имеющими ключи, а 2 и 4 - значениями.Подробности прокомментированы в демоверсии.

const data = [{
  "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
}];

/** genTable(selector, [...array]) 
@Param: selector [String]: element to append table to
        [...array][Array]: copy of the array of objeccts
*/
//A - Append htmlString of table to the given element
/*B - for...of loop of the given array by static method .entries()
      [index, object] destructed assignment allows easy access
      */
/*C - $('table')[0] is a jQ Object dereferenced to a jS Object
      in order to use the JS method .insertRow()
      */
//D - Same as B but with Object.entries() on each object of array
/*E - On each key/value  pair of current object .insertCell()
      and assign the text of each cell with the key then the value
      */
function genTable(selector, [...array]) {
  $(selector).append(`<table class='table table-striped table-bordered table-hover'><tbody></tbody></table>`); //A

  for (let [index, object] of array.entries()) { //B
    let row = $('table')[0].insertRow(); //C
    for (let [key, value] of Object.entries(object)) { //D
      row.insertCell().textContent = key; //E
      row.insertCell().textContent = value; //E
    }
  }
}

genTable('main', [...data])

tr td:first-of-type {
  background: #4AD184;
}

tr td:nth-of-type(2) {
  background: #EA69EF;
}

tr td:nth-of-type(3) {
  background: #E1A558;
}

tr td:last-of-type {
  background: #F4F065;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<main></main>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>