html table with Json

Question

html table with Json

Navigation

#1 by (1 votes)
#2 by (1 votes)

1

I have a table defined in html, and I wanted to fill it with a JSON but since I'm new to javascript I can not pass the data correctly here is my table

<table id="ctabco_tb" class="ctabco_tb tb_ctrl" >
                <thead>
                <tr>
                    <th> ID </th>
                    <th title="Ordenar por.."> Nombre </th>
                    <th title="Ordenar por.."> Banco < /th>

                </tr>
            </thead>
</table>

here's my json inside the script

var datosBancos = '{"bancos":[' +'{"id":"001","nombre":"Air" ,"banco":" de la Plata"},
' +'{"id":"118","nombre":"Pepe","banco":"Salem" },'
+'{"id":"225","nombre":"Arreg" ,"banco":"Transant"},'+'
{"id":"005","nombre":"DANALD","banco":"orden"},'+
'{"id":"200","nombre":"Pablo","banco":"BNC"}]}';

Some help please

javascript html

asked by user62207 22.06.2018 в 18:22

source

2 answers

Find values in a VB array help with group by in mysql

score 1 · Answer 1

Modify some things in your code. For example, your json is actually a string, but if we use the real json object, it could be done this way:

var datosBancos = {"bancos":[{"id":"001","nombre":"Air" ,"banco":" de la Plata"},
{"id":"118","nombre":"Pepe","banco":"Salem" },{"id":"225","nombre":"Arreg" ,"banco":"Transant"},{"id":"005","nombre":"DANALD","banco":"orden"},{"id":"200","nombre":"Pablo","banco":"BNC"}]};

var table = document.getElementById("ctabco_tb").getElementsByTagName('tbody')[0];
var i = 0;

datosBancos.bancos.forEach(function(banco) {
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(i);

// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);

// Add some text to the new cells:
cell1.innerHTML = banco.id;
cell2.innerHTML = banco.nombre;
cell3.innerHTML = banco.banco;
i++;
});

<table id="ctabco_tb" class="ctabco_tb tb_ctrl" >
                <thead>
                <tr>
                    <th> ID </th>
                    <th title="Ordenar por.."> Nombre </th>
                    <th title="Ordenar por.."> Banco </th>

                </tr>                
            </thead>
            <tbody>
            </tbody>
</table>

score 1 · Answer 2

Modify your string to convert it to a JSON.

<html>
<head>
    <title>Convert JSON Data to HTML Table</title>
    <style>
        table, th, td 
        {
            margin:10px 0;
            border:solid 1px #333;
            padding:2px 4px;
            font:15px Verdana;
        }
        th {
            font-weight:bold;
        }
    </style>
</head>
<body>
    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
    <div id="showData"></div>
</body>
  
  
  <script>
    function CreateTableFromJSON() {
        var bankData = [{
	"id": "001",
	"nombre": "Air",
	"banco": " de la Plata"
}, {
	"id": "118",
	"nombre": "Pepe",
	"banco": "Salem"
}, {
	"id": "225",
	"nombre": "Arreg",
	"banco": "Transant"
}, {
	"id": "005",
	"nombre": "DANALD",
	"banco": "orden"
}]

        // EXTRACT VALUE FOR HTML HEADER. 
        var col = [];
        for (var i = 0; i < bankData.length; i++) {
            for (var key in bankData[i]) {
                if (col.indexOf(key) === -1) {
                    col.push(key);
                }
            }
        }

        // CREATE DYNAMIC TABLE.
        var table = document.createElement("table");

        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

        var tr = table.insertRow(-1);                   // TABLE ROW.

        for (var i = 0; i < col.length; i++) {
            var th = document.createElement("th");      // TABLE HEADER.
            th.innerHTML = col[i];
            tr.appendChild(th);
        }

        // ADD JSON DATA TO THE TABLE AS ROWS.
        for (var i = 0; i < bankData.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = bankData[i][col[j]];
            }
        }

        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("showData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }
</script>
</html>