CODEWITHSUNDEEP
javascripthtml
Florent
Florent

Reputation: 1928

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

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,

Upvotes: 0

Views: 49

Answers (2)

Jonas Wilms
Jonas Wilms

Reputation: 138235

To simplify the overall code:

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

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65808

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>

Upvotes: 3

Related Questions