Question

0

114

Views

Joining JS array with HTML table

I created a table with HTML and I need to join that table with an array from JS:

var array = [
  ["A4", "Audi", "2015", "1234"],
  ["A3", "Audi", "2011", "1542"],
  ["335i", "BMW", "2012", "9874"],
  ["440d", "BMW", "2015", "1975"],
  ["Civic", "Honda", "2002", "6574"],
]
console.log(array)

table = document.getElementById("myTable");
for (var i = 0; i < array.length; i++) {
  // create a new row
  var newRow = table.insertRow(table.length);
  for (var j = 0; j < array[i].length; j++) {
    // create a new cell
    var cell = newRow.insertCell(j);

    // add value to the cell
    cell.innerHTML = array[i][j];
  }
}

<table id="myTable">
  <caption id=a><b>Automobiliai</caption></b>
    <tr>
      <th>Modelis</th>
      <th>Gamintojas</th>
      <th>Metai</th>
      <th>Variklio Numeris</th>
    </tr>
</table>

But I get the error in console: "Uncaught TypeError: Cannot read properties of null (reading 'insertRow')" What is wrong there?

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Answer 1 · 2022-07-10T14:01:15.231Z

You can do this by looping through the country list and creating an HTML string. Then you can put that inside the tbody using a class or id selector. Here is an example

var country = ["Norway", "Sweden", "Denmark"];
    var capital = ["Oslo", "Stockholm" , "Copenhagen"]

    var bodyString = '';
    $.each(country, function(index, ctry) {
        bodyString += ('<tr><td>'+ctry+'</td><td>'+capital[index]+'</td></tr>');
    });
    $('.countriesTable tbody').html(bodyString);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>

  <table class="countriesTable">
      <thead>
          <tr><th>Country</th><th>Capital</th>
      </thead>
      <tbody>
      
      </tbody>
  </table>
</body>
</html>

Answer 2 · 2022-07-10T14:01:15.238Z

Looks like your code works. Here is an alternative approach, using Array.reduce to create the rows and insertAdjacentHTML to append the rows.

document.querySelector(`#myTable`).insertAdjacentHTML(
  `beforeEnd`, [
    ["A4", "Audi", "2015", "1234"],
    ["A3", "Audi", "2011", "1542"],
    ["335i", "BMW", "2012", "9874"],
    ["440d", "BMW", "2015", "1975"],
    ["Civic", "Honda", "2002", "6574"],
  ].reduce( (acc, [Modelis, Gamintojas, Metai, VariklioNumeris]) =>
    `${acc}<tr><td>${Modelis}</td><td>${Gamintojas}</td><td>${
        Metai}</td><td>${VariklioNumeris}</td></tr>`, ``)
);

#myTable th:nth-child(n+3):nth-child(-n+4),
#myTable td:nth-child(n+3):nth-child(-n+4) {
  text-align: center;
}

<table id="myTable">
  <caption id=a><b>Automobiliai</caption></b>
    <tr>
      <th>Modelis</th>
      <th>Gamintojas</th>
      <th>Metai</th>
      <th>Variklio Numeris</th>
    </tr>
</table>

Answer 3 · 2022-07-10T14:01:15.244Z

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

    <table id="myTable">
      <caption id=a><b>Automobiliai</caption></b>
      <tr>
        <th>Modelis</th>
        <th>Gamintojas</th>
        <th>Metai</th>
        <th>Variklio Numeris</th>
      </tr>
    </table>

    <script type="text/javascript">
        var array = [
        ["A4", "Audi", "2015", "1234"],
        ["A3", "Audi", "2011", "1542"],
        ["335i", "BMW", "2012", "9874"],
        ["440d", "BMW", "2015", "1975"],
        ["Civic", "Honda", "2002", "6574"],
        ["A4", "Audi", "2015", "1234"],
        ["A3", "Audi", "2011", "1542"],
        ["335i", "BMW", "2012", "9874"],
        ["440d", "BMW", "2015", "1975"],
        ["Civic", "Honda", "2002", "6574"],
        ]
        console.log(array)

        table = document.getElementById("myTable");
        for(var i = 0; i < array.length; i++)
        {
        // create a new row
        var newRow = table.insertRow(table.length);
        for(var j = 0; j < array[i].length; j++)
        {
        // create a new cell
        var cell = newRow.insertCell(j);

        // add value to the cell
        cell.innerHTML = array[i][j];
        }
        }
    </script>
</body>
</html>

I think, I found your problem, actually your script is loading before looping elements

0

114

Joining JS array with HTML table

3 answers

0

0

0

Find remote jobs

Andres GPT