jquery dynamically create table from array

Question

I am currently trying to create a table from an array. The array is formatted like the following:

[
  {
    header: 'ID',
    values: [1, 2]
  },
  {
    header: 'First Name',
    values: ['John', 'Jayne']
  },
  {
    header: 'Last Name',
    value: ['Doe', 'Doe']
  }
]

I've been successful in creating the headers for the table but a bit stumped on where or how to approach the rendering from the body in such a fashion from this array.

const exampleArray = [
  {
    header: 'ID',
    values: [1, 2]
  },
  {
    header: 'First Name',
    values: ['John', 'Jayne']
  },
  {
    header: 'Last Name',
    values: ['Doe', 'Doe']
  }
];

const header = $('#results thead tr');
const body = $('#results tbody');

exampleArray.forEach((row) => {
  header.append(
    $(`<th>${row.header}</th>`)
  );
});

<table id="results">
<thead>
<tr>
  <!-- HEADERS -->
</tr>
</thead>
<tbody>

</tbody>
</table>

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

I'm unsure if this is the best kind of approach to take or whether it's worth mapping the result set into something more mutable before trying to render the table.

AlexSp3 · Answer 1 · 2021-07-24T22:15:12.650

Just iterate each value item of the array and append it to each column:

const exampleArray = [{
    header: 'ID',
    values: [1, 2]
  },
  {
    header: 'First Name',
    values: ['John', 'Jayne']
  },
  {
    header: 'Last Name',
    values: ['Doe', 'Doe']
  }
];

const header = $('#results thead tr');
const body = $('#results tbody');

exampleArray.forEach((row) => {
  header.append(
    $(`<th>${row.header}</th>`)
  );
});


// This does the magic

// Iterate up to the values length (row length)
for (var i = 0; i < exampleArray[0].values.length; i++) {
  // Create new row
  body.append("<tr id='row-" + i + "'></tr>");
  // Iterate all items (columns)
  exampleArray.forEach((column) => {
    // Append value to the row
    $("#row-" + i).append("<td>" + column.values[i] + "</td>");
  });
}

<table id="results">
  <thead>
    <tr>
      <!-- HEADERS -->
    </tr>
  </thead>
  <tbody>

  </tbody>
</table>

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

score 0 · Answer 2 · answered Jul 24 '21 at 22:04

Your call the elements in exampleArray rows, while they're in fact columns. This might be where the confusion arises from. See the snippet below for a working example.

const exampleArray = [
  {
    header: 'ID',
    values: [1, 2]
  },
  {
    header: 'First Name',
    values: ['John', 'Jayne']
  },
  {
    header: 'Last Name',
    values: ['Doe', 'Doe']
  }
];

const header = $('#results thead tr');
const body = $('#results tbody');

exampleArray.forEach((column) => {
  header.append(
    $(`<th>${column.header}</th>`)
  );
});

// Compute the number of rows in the array
const nRows = exampleArray[0].values.length;

for (let i = 0; i < nRows; i++) {
  // row contains all cells in a row
  let row = $("<tr/>");
  // Loop over the columns
  exampleArray.forEach((column) => {
    // For each column, we add the i-th value, since we're building the i-th row
    row.append(`<td>${column.values[i]}</td>`);
  });
  // Add the row to the table body
  body.append(row);
}

<table id="results">
<thead>
<tr>
  <!-- HEADERS -->
</tr>
</thead>
<tbody>

</tbody>
</table>

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

Spectric · Answer 3 · 2021-07-24T22:13:28.823

You can use a for loop to iterate from 0 to the length of the values property of the first item, and use a nested loop to get the item at that index of each individual item:

const tableData = [{
    header: 'ID',
    values: [1, 2]
  },
  {
    header: 'First Name',
    values: ['John', 'Jayne']
  },
  {
    header: 'Last Name',
    values: ['Doe', 'Doe']
  }
]

const header = $('#results thead tr');
const body = $('#results tbody');

tableData.forEach((row) => {
  header.append(
    $(`<th>${row.header}</th>`)
  );
});

for (let i = 0; i < tableData[0].values.length; i++) {
  var row = document.createElement("tr");
  tableData.forEach(f => $(row).append(`<td>${f.values[i]}</td>`));
  body.append(row);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="results">
  <thead>
    <tr id="headers">
    </tr>
  </thead>
  <tbody id="b">

  </tbody>
</table>

jquery dynamically create table from array

3 Answers3