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
– Sangram Nandkhile

2018-05-02 00:54:56 +00:00
Commented May 2, 2018 at 0:54 — Sangram Nandkhile
– Sangram Nandkhile, Commented May 2, 2018 at 0:54
I realize that, but this is what I need

Dario Zadro
– Dario Zadro

2018-05-02 00:58:09 +00:00
Commented May 2, 2018 at 0:58 — Dario Zadro
– Dario Zadro, Commented May 2, 2018 at 0:58

Mikey · Accepted Answer · 2018-05-02 01:29:36Z

3

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>

answered May 2, 2018 at 1:29

Mikey

6,7564 gold badges25 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dario Zadro Over a year ago

Beautiful! Thank you!

ewwink · Accepted Answer · 2018-05-02 02:36:19Z

1

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>

answered May 2, 2018 at 2:36

ewwink

19.3k2 gold badges49 silver badges56 bronze badges

1 Comment

Dario Zadro Over a year ago

I like this solution better because it uses my existing jQuery. Thanks!

Collectives™ on Stack Overflow

Create HTML table using jQuery and JSON array

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related