Multidimensional Array to bootstrap tables

Question

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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:

You can look at my solution also where you don't need to worry about array indexes and string concatenation while adding values in cell — Ankit Kumar
– Ankit Kumar, Commented Nov 15, 2021 at 10:08

Pradyumna_Kali_Linux · Accepted Answer · 2021-11-15 09:34:35Z

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Ankit Kumar · Accepted Answer · 2021-11-15 10:12:25Z

1

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

edited Nov 15, 2021 at 10:12

answered Nov 15, 2021 at 9:48

Ankit Kumar

1398 bronze badges

Collectives™ on Stack Overflow

Multidimensional Array to bootstrap tables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related