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: 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

work on each td each one apart inside tr loop when loading data from json file

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"],
...
]

JavaScript
​x
 
[
["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>

JavaScript
 
    <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>
​
​

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);
    })
}

JavaScript
 
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>

JavaScript
 
<thead>
    <tr>
        <th>column_1</th>
        <th>column_2</th>
        <th>column_3_link</th>
    </tr>
</thead>
​

Advertisement

Answer