0
133
VistasMultidimensional Array to bootstrap tables
I had a multidimensional array that consists of dynamic elements per subarray. What I was trying to do was construct a bootstrap table by reading the array. To explain the table format better: If my multidimensional array is mdArray = [[name1, name2, name3, name4], [name5, name6, name7]]
I wanted to create a table of 4 columns with mdArray[0], mdArray[1], mdArray[2], mdArray[3] then create an new row when next sub-array is detected with columns mdArray[4], mdArray[5], mdArray[6]. What I have tried is below. How can I achieve this? Any help is appreciated. Thanks in advance?
mdArray = [
['name1', 'name2', 'name3', 'name4'],
['name5', 'name6', 'name7']
]
$('.table').ready(
function() {
console.log('table loaded');
var theTable = "";
for (var j = 0; j < mdArray.length; j++) {
theTable += '<tr class="text-center">';
for (var k = 0; k < 2; k++) {
theTable += '<td> class="text-center"' + mdArray[k][j] + '</td>';
}
theTable += '</tr>';
}
$('.table').append(theTable);
//expected name1 name2 name3 name4
//next row
//name5 name6 name7
});<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<body>
<table class="table table">
<tbody>
</tbody>
</table>
</body>Because someone suggested a visual representation:
2 Respuestas
Responde la pregunta0
Is this what you looking for
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</head>
<body>
<!-- <button onclick="eventEmitArray()">Insert the array</button> -->
<table class="table">
<tbody></tbody>
</table>
</body>
<script>
let mdArray = [
["name1", "name2", "name3", "name4"],
["name5", "name6", "name7"],
];
$(".table").ready(function() {
console.log("table loaded");
var theTable = "";
for (var j = 0; j < mdArray.length; j++) {
theTable += '<tr class="text-center">';
for (var k = 0; k < mdArray[j].length; k++) {
theTable += '<td class="text-center">' + mdArray[j][k] + "</td>";
}
theTable += "</tr>";
}
$(".table").append(theTable);
});
</script>
</html>0
You can use forEach loop and you don't need to worry about number of columns and handling array indexes
$('.table').ready(function() {
var theTable = "";
mdArray.forEach((names) => {
theTable += '<tr class="text-center">'
names.forEach((name) => {
theTable += `<td class="text-center">${name}</td>`;
})
theTable += '</tr>'
}
);
$('.table').append(theTable);
});