Convertir les données JSON en tableau HTML

/
Solutions techniques
/
Convertir les données JSON en tableau HTML

Convertir les données JSON en tableau HTML

Javascript
Développement front-end

Fichier index.html

<!DOCTYPE html>
<html>
<head>
	<title>Convertir les données JSON en tableau HTML | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Convertir les données JSON en tableau HTML">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="container mt-5">
		<form class="row">
		  <div class="col-12">
			 <div class="table-responsive">
                <input type='button' onclick='tableFromJson()' class='btn btn-success btn-md' value='Créer un tableau depuis les données JSON' />
                <p id='showData'></p>
             </div>
		  </div>
		</form>
	  </div>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Fichier script.js

function tableFromJson() {
    // the json data. (you can change the values for output.)
    var myData = [
        {
            "title":"How to create a directory using NodeJS ?",
            "url":"nodejs-how-to-create-a-directory-using-Nodejs.php",
            "tags":"Node.js",
            "category":"Développement back-end"
        },{
            "title":"How to display all files in a directory using Node.js ?",
            "url":"nodejs-how-to-display-all-files-in-a-directory-using-Nodejs.php",
            "tags":"Node.js",
            "category":"Développement back-end"
        },{
            "title":"How to scroll top position in page HTML with Jquery",
            "url":"js-how-to-scroll-top-position-in-page-html-with-jquery.php",
            "tags":"Jquery",
            "category":"Développement front-end"
        },{
            "title":"How to force page scroll position to top at page refresh in HTML",
            "url":"js-how-to-force-page-scroll-position-to-top-at-page-refresh-in-HTML.php",
            "tags":"Javascript, Jquery",
            "category":"Développement front-end"
        },{
            "title":"How to get random value out of an array ?",
            "url":"php-how-to-get-random-value-out-of-an-array.php",
            "tags":"PHP",
            "category":"Développement back-end"
        }
    ];
    // Extract value from table header. 
    // ('Title', 'URL', 'Tags' ,'Category')
    var col = [];
    for (var i = 0; i < myData.length; i++) {
        for (var key in myData[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }
    // Create a table.
    var table = document.createElement("table");
    table.setAttribute('class', 'table table-hover table-bordered');
    // Create 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 < myData.length; i++) {
        tr = table.insertRow(-1);
        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myData[i][col[j]];
        }
    }
    // Now, add the newly created table with json data, to a container.
    var divShowData = document.getElementById('showData');
    divShowData.innerHTML = "";
    divShowData.appendChild(table);
}