I created a code to convert json data to html table using javascript and ajax: (column 1 is text, column 2 is link, column 4 is image link)
Data:
[ ["Product_1_Title", "www.website1.com", 20, "https://images-na.ssl-images-amazon.com/images/I/81b1roZwACL._AC_SL1500_.jpg"], ["Product_2_Title", "www.website2.com", 50, "https://images-na.ssl-images-amazon.com/images/I/71W1KvLH3sL._AC_SL1500_.jpg"], ... ]
This is the code, it work well, but on the table result, I want to hide column 2 and put the link in column 2 in an anchor in column 1 so the Title become clickable link, and put the image link on column 4 into src so the picture shown on the cell.
<body>
<table id="tab">
<thead>
<tr>
<th>column_1</th>
<th>column_2_link</th>
<th>column_3</th>
<th>column_4_link</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script type="text/javascript">
const TabBody = document.querySelector("#tab > tbody")
function loadData() {
const request = new XMLHttpRequest();
request.open("get", "rows.json");
request.onload = () => {
try {
const json = JSON.parse(request.responseText);
populateTable(json);
} catch (e) {
console.warn("error");
}
};
request.send();
}
function populateTable(json){
while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}
json.forEach((row) => {
const tr = document.createElement("tr");
row.forEach((cell) => {
const td = document.createElement("td");
// I tried this and it put the link text inside <a>
// td.innerHTML = /.com//g.test(cell)
// ? `<a href="https://${cell}">${cell}</a>`
// : cell;
// and tried this and it put the link text inside <img>
td.innerHTML = /alicdn.com/g.test(cell)
? `<img src="https://${cell}" class="img-fluid"/>`
: cell;
tr.appendChild(td);})
TabBody.appendChild(tr);
})
}
document.addEventListener("DOMContentLoaded", () => { loadData();})
</script>
</body>
Advertisement
Answer
Instead of iterating through the cells, if you know the position of the columns in the array you can hard code the row.
function populateTable(json){
while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}
json.forEach((row) => {
const tr = document.createElement("tr");
let td = document.createElement("td");
td.innerHTML = `<a href='${row[1]}'>${row[0]}</a>`
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = row[2];
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML = `<img src="https://${row[3]}" class="img-fluid"/>`;
tr.appendChild(td);
TabBody.appendChild(tr);
})
}
And take out the second column in the table instead of hiding it
<thead>
<tr>
<th>column_1</th>
<th>column_2</th>
<th>column_3_link</th>
</tr>
</thead>