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, Apr 15 '17 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, Apr 15 '17 at 17:38
@StephanBijzitter You should look again. There is a hyperlink in the 4th array element. — Scott Marcus, Apr 15 '17 at 17:40
@StephanBijzitter there are some table cells with markup, like `orderArray[0][3]` — Pointy, Apr 15 '17 at 17:40

score 3 · Accepted Answer · answered Apr 15 '17 at 17:29

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>

@Florent You're welcome. Yes, it allows us to completely remove indexes in this case. — Scott Marcus, Apr 15 '17 at 17:44
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()` ! — Florent, Apr 15 '17 at 19:47

Jonas Wilms · Answer 2 · 2017-04-15T17:35:53.860

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 '17 at 17:35

answered Apr 15 '17 at 17:33

Jonas Wilms

132,000
20
149
151

@ScottMarcus join? – Jonas Wilms Apr 15 '17 at 17:36

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

2 Answers2