Create HTML table using jQuery and JSON array

Question

I'm having difficulty trying to create an HTML table from a returned JSON string. Here's the JSON:

{
    "Heading 1": ["name 1", "name 2", "name 3"],
    "Heading 2": ["data 1", "data 2", "data 3"],
}

The Table should look like this:

<table>
    <thead>
        <tr>
            <th>Heading 1</th>
            <th>Heading 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>name 1</td>
            <td>data 1</td>
        </tr>
        <tr>
            <td>name 2</td>
            <td>data 2</td>
        </tr>
        <tr>
            <td>name 3</td>
            <td>data 3</td>
        </tr>
    </tbody>
</table>

I gave the "head" created, but can't figure out the "body".

var table = $('<table/>'),
    table_head = $('<thead/>'),
    head_row = $('<tr/>');

$.each(val, function (th, items) {
    head_row.append('<th>' + th + '</th>');

    var body_row = $('<tr/>');
    $.each(items, function (index, item) {

        // What do to here to create <td>'s ?!?!

    });
    console.log(items);
});

table_head.append(head_row);
table.append(table_head);

Just can't get the logic to work. There are more headings in the returned JSON and tried to simplify for illustration. Please help, and thanks in advance!

It would be better to go row wise, rather than column-wise – Sangram Nandkhile May 02 '18 at 00:54 — Sangram Nandkhile, May 02 '18 at 00:54
I realize that, but this is what I need – Dario Zadro May 02 '18 at 00:58 — Dario Zadro, May 02 '18 at 00:58

score 3 · Answer 1 · answered May 02 '18 at 01:29

It's better to just concatenate strings than create jQuery objects.

var json = {
    "Heading 1": ["name 1", "name 2", "name 3"],
    "Heading 2": ["data 1", "data 2", "data 3"],
};

var headings = Object.keys(json);

var html = '<table>';

// build table headings
html += '<thead><tr>';
$.each(headings, function () {
  // this is the current heading
  html += '<th>' + this + '</th>';
});
html += '</tr></thead>';


// build table body
html += '<tbody>';
// use the length of first array to determine how many rows
for (i = 0, len = json[headings[0]].length; i < len; i++) {
  html += '<tr>';
  // build each cell using the heading's ith element
  $.each(headings, function () {
    html += '<td>' + json[this][i] + '</td>';
  });
  html += '</tr>';
}
html += '</tbody>';
html += '</table>';

$('.container').append(html);

table {
  border-collapse: collapse;
}
th, td {  
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"></div>

score 1 · Accepted Answer · answered May 02 '18 at 02:36

create tr element if needed then use index to push td element

var json = {
  "Heading 1": ["name 1", "name 2", "name 3"],
  "Heading 2": ["data 1", "data 2", "data 3"],
};

var table = $('<table/>'),
  table_head = $('<thead/>'),
  head_row = $('<tr/>'),
  table_body = $('<tbody/>'),
  body_row = [];

$.each(json, function(th, items) {
  head_row.append('<th>' + th + '</th>');
  $.each(items, function(index, item) {
  
    if (body_row[index] === undefined) {
      body_row[index] = $('<tr/>');
      body_row[index].append('<td>' + item + '</td>');
    } 
    else
      body_row[index].append('<td>' + item + '</td>');
  });
  
  //console.log(items);
});

table_head.append(head_row);
table_body.append(body_row)
table.append(table_head);
table.append(table_body);
$('body').html(table)

table {
  border-collapse: collapse;
}
th, td {  
  border: 1px solid #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I like this solution better because it uses my existing jQuery. Thanks! — Dario Zadro, May 02 '18 at 14:06

Create HTML table using jQuery and JSON array

2 Answers2

Linked

Related