How to convert arrays which contain HTML elements to a table in Javascript?

Question

I have an array of arrays which contain HTML elements like <a> I would like to convert to a table but my problem is that HTML is displayed as raw text.

First I supposed it was a problem with hidden double quotes so I replace them with .replace()

cell.appendChild(document.createTextNode(x[i][j].replace(/"/g, "")));

But it looks like HTML is corretly formated in the Chrome DevTools DOM element :

<td><a href='http://website.org/prod4'>Product4</a></td>

Could you please tell me what should I do to display HTML elements in my table ?

JSFiddle

var orderArray = [
    ["1", "29-Aug-2012", "Product1", "client1"],
    ["2", "29-Aug-2012", "Product2", "client2"],
    ["3", "29-Aug-2012", "Product3", "client3"],
    ["4", "29-Aug-2012", "<a href='http://website.org/prod/'>Product4</a>", "client4"],
    ["5", "29-Aug-2012", "Product5", "client5"]
    ];

function display() {
    // get handle on div
    var table = document.createElement("table");
    for (var i = 0; i < orderArray.length; i++) {
        var row = table.insertRow();
        for (var j = 0; j < orderArray[i].length; j++) {
            var cell = row.insertCell();
            cell.appendChild(document.createTextNode(orderArray[i][j]));
        }
    }
    return table;
}
var container = document.getElementById('container');
container.appendChild(display());

I use the code proposed by Bergi in this question : how to display array values inside <table> tag?

Thank you,

The .createTextNode() method does exactly what its name suggests: it makes a text node. That's why the browser is ignoring your HTML markup. — Pointy
– Pointy, Commented Apr 15, 2017 at 17:18
The title is also a bit incorrect, as I only see a String[][] array. There's no HTML in any array man — Stephan Bijzitter
– Stephan Bijzitter, Commented Apr 15, 2017 at 17:38
@StephanBijzitter You should look again. There is a hyperlink in the 4th array element. — Scott Marcus
– Scott Marcus, Commented Apr 15, 2017 at 17:40
@StephanBijzitter there are some table cells with markup, like orderArray[0][3] — Pointy
– Pointy, Commented Apr 15, 2017 at 17:40

Scott Marcus · Accepted Answer · 2017-04-15 17:29:14Z

3

You can use the .innerHTML property to solve the issue of parsing the HTML, when there is HTML and injecting the plain text when there isn't.

Additionally, you can use the Array.forEach() method as an easier way to loop.

var orderArray = [
    ["1", "29-Aug-2012", "Product1", "client1"],
    ["2", "29-Aug-2012", "Product2", "client2"],
    ["3", "29-Aug-2012", "Product3", "client3"],
    ["4", "29-Aug-2012", "<a href='http://website.org/prod4'>Product4</a>", "client4"],
    ["5", "29-Aug-2012", "Product5", "client5"]
];

function display() {
    // get handle on div
    var container = document.getElementById('container');
    
    var table = document.createElement("table");
    
    // Arrays support a forEach method that accepts a callback function
    // to be executed on each item of the array. This function is automatically
    // passed 3 arguments: the current array element, the current index and the array itself.
    // We only need to capture the reference to the array element (value and innerValue in
    // this example).
    orderArray.forEach(function(value) {
        var row = table.insertRow();
        
        value.forEach(function(innerValue) {
            var cell = row.insertCell();
            cell.innerHTML = innerValue;
        });
    });
    
    return table;
}

container.appendChild(display());

td { padding:5px; }

<div id="container"></div>

answered Apr 15, 2017 at 17:29

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

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

3 Comments

Florent Over a year ago

Thank you for the Array.forEach() hint, more elegant.

Scott Marcus Over a year ago

@Florent You're welcome. Yes, it allows us to completely remove indexes in this case.

Florent Over a year ago

Is there a possibility with insertRow() to specify whether it is a td or a th that is inserted in the tr ? can't find how I could declare the first array index as table header. EDIT oh I see there is createTHead() !

Jonas Wilms · Accepted Answer · 2017-04-15 17:35:53Z

1

To simplify the overall code:

container.innerHTML="<table>"+(orderArray.map(row=>"<tr><td>"+row.join("</td><td>")+"</td></tr>").join(""))+"</table>".

edited Apr 15, 2017 at 17:35

answered Apr 15, 2017 at 17:33

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

1 Comment

Jonas Wilms Over a year ago

@ScottMarcus join?

Collectives™ on Stack Overflow

How to convert arrays which contain HTML elements to a table in Javascript?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related