Сложность построения динамической таблицы из данных JSON с использованием JavaScript
Я столкнулся с проблемами при создании динамической таблицы из данных JSON с использованием JavaScript. Я попробовал несколько подходов, но ни один из них не работает так, как ожидалось. По сути, я пытаюсь динамически заполнить таблицу на основе данных, предоставленных в формате JSON. Несмотря на все мои усилия, я не могу достичь желаемого результата.
Что я пробовал:
Я попытался перебрать данные JSON с помощью JavaScript и соответствующим образом динамически создавать строки и ячейки таблицы. Я исследовал различные библиотеки и фреймворки JavaScript, такие как jQuery, чтобы упростить процесс, но все равно столкнулся с трудностями. Я экспериментировал с разными методами анализа данных JSON и внедрения их в структуру таблицы, но ни один из них не дал желаемого результата.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Dynamic Table</title>
<script>
const dynamicData = [
{ name: "GSW", years: [2021, 2022, 2023, 2024, 2025, 2026, 2027, 2028], wins: [10, 11, 12, 13, 13, 13, 13, 14] },
{ name: "LAL", years: [2029, 2030, 2031, 2032, 2033, 2034, 2035], wins: [15, 16, 17, 18, 9, 10, 11] },
{ name: "PHX", years: [2000, 2001], wins: [1, 4] }
];
function populateTable() {
const tableBody = document.getElementById("data-body");
dynamicData.forEach(team => {
let yearChunks = chunkArray(team.years, 6);
yearChunks.forEach((chunk, index) => {
if (index === 0) {
const row1 = document.createElement("tr");
const nameCell1 = document.createElement("td");
nameCell1.textContent = "name";
row1.appendChild(nameCell1);
const nameCell2 = document.createElement("td");
nameCell2.setAttribute("colspan", `${chunk.length + 1}`);
nameCell2.textContent = team.name;
row1.appendChild(nameCell2);
tableBody.appendChild(row1);
}
const row2 = document.createElement("tr");
if (index === 0) {
const titleCell = document.createElement("td");
titleCell.textContent = "year";
row2.appendChild(titleCell);
}
chunk.forEach(year => {
const yearCell = document.createElement("td");
yearCell.textContent = year;
row2.appendChild(yearCell);
});
tableBody.appendChild(row2);
const row3 = document.createElement("tr");
if (index === 0) {
const winsCell = document.createElement("td");
winsCell.textContent = "wins";
row3.appendChild(winsCell);
}
chunk.forEach((_, i) => {
const winsCell = document.createElement("td");
winsCell.textContent = team.wins[index * 6 + i];
row3.appendChild(winsCell);
});
tableBody.appendChild(row3);
});
});
}
function chunkArray(array, size) {
const chunks = [];
for (let i = 0; i < array.length; i += size) {
chunks.push(array.slice(i, i + size));
}
return chunks;
}
window.onload = populateTable;
</script>
</head>
<body>
<table border = "1">
<tbody id = "data-body">
</tbody>
</table>
</body>
</html>
Какой мой ожидаемый результат:
Что у меня есть:
Однако я изо всех сил пытаюсь добиться этого. У меня есть данные команды, и я хочу создать подобную таблицу, используя предоставленные данные.
{
"name": "GSW",
"year": [
"2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030",
"2031", "2032", "2033", "2034", "2035"
],
"wins": [
10, 11, 12, 13, 13, 13, 13, 14, 15, 16, 17, 18, 19, 20, 21
],
},
{
"name": "LAL",
"year": [
"2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030",
"2031", "2032", "2033", "2034", "2035"
],
"wins": [
9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
],
},
{
"name": "PHX",
"year": ["2000", "2001"],
"wins": [1, 4]
}
]
Технически я хочу создать таблицу максимум из 6 столбцов. Когда оно достигнет 6 столбцов, его следует перевернуть, начиная со следующей строки таблицы. Если данных по одной команде недостаточно для заполнения таблицы, следует взять данные от следующей команды. Последняя строка может быть пустой.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Самое сложное здесь — подобрать правильный colspan для ячеек в строках с именами.
Я решил, прежде всего, поместить все данные в «непрерывные» массивы (запишите restructuredData на консоль, чтобы понять, что я имею в виду), чтобы их можно было пройти по всем за один раз и создать строки и ячейки таблицы.
Сначала я задаю имя в каждую ячейку строк имен, а затем очищаю их (удаляю ячейки с повторяющимися именами, исправляю colspan) позже, после вставки таблицы в DOM.
const dynamicData = [{
"name": "GSW",
"years": [
"2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030",
"2031", "2032", "2033", "2034", "2035"
],
"wins": [
10, 11, 12, 13, 13, 13, 13, 14, 15, 16, 17, 18, 19, 20, 21
],
},
{
"name": "LAL",
"years": [
"2021", "2022", "2023", "2024", "2025", "2026", "2027", "2028", "2029", "2030",
"2031", "2032", "2033", "2034", "2035"
],
"wins": [
9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23
],
},
{
"name": "PHX",
"years": ["2000", "2001"],
"wins": [1, 4]
}
];
let cols = 6;
let restructuredData = {
names: [],
years: [],
wins: [],
};
dynamicData.forEach(function(e) {
let names = [];
names.length = e.years.length;
restructuredData.names = restructuredData.names.concat(names.fill(e.name, 0, names.length));
restructuredData.years = restructuredData.years.concat(e.years);
restructuredData.wins = restructuredData.wins.concat(e.wins);
});
//console.info(restructuredData);
let rows = Math.ceil(restructuredData.years.length / 6);
let table = '<table>';
for (let r = 0; r < rows; ++r) {
table += '<tr class = "names"><td>name</td>';
for (let c = 0; c < cols; ++c) {
table += '<td>' + (restructuredData.names[r * cols + c] || '') + '</td>';
}
table += '</tr>';
table += '<tr><td>year</td>';
for (let c = 0; c < cols; ++c) {
table += '<td>' + (restructuredData.years[r * cols + c] || '') + '</td>';
}
table += '</tr>';
table += '<tr><td>wins</td>';
for (let c = 0; c < cols; ++c) {
table += '<td>' + (restructuredData.wins[r * cols + c] || '') + '</td>';
}
table += '</tr>';
}
table += '</table>';
let tableContainer = document.querySelector('#tableContainer');
tableContainer.innerHTML = table;
// clean up the name row cells & set appropriate colspan
Array.from(tableContainer.querySelectorAll('tr.names')).forEach(function(row) {
let cells = row.cells;
let cellIndex = 1;
let colSpan = 1;
while (cells[cellIndex]) {
if (cells[cellIndex].textContent && cells[cellIndex + 1] && cells[cellIndex].textContent === cells[cellIndex + 1].textContent) {
cells[cellIndex].colSpan = ++colSpan;
cells[cellIndex + 1].remove();
} else {
colSpan = 1;
++cellIndex;
}
}
});td {
border: 1px solid;
}<div id = "tableContainer"></div>Мне очень жаль, чувак. Но у меня есть еще один вопрос. У меня есть контент под столом, и если высота всего контента превысит размер страницы А4 или достигнет определенного размера, можно ли начать со следующей страницы? например, использование page-break-after и т. д. Я пробовал это, но не очень полезно или я буквально не понимаю. Потому что мой стол стал нижним колонтитулом позади.
Это звучит как проблема, совершенно не связанная с исходной темой этого вопроса, поэтому вам, вероятно, следует задать новый.
Спасибо брат. Ты действительно спас мне жизнь. Ты принадлежишь мне, чувак