Bonjour,
Le code dépend de ce que contient ton json, et de ce que tu veux afficher.
Supposons que tes données json soient dans un fichier json de la forme :
[{"nom":"Dupont", "prenom": "Jean", "date": "22/11/2021"},
{"nom":"Martin", "prenom": "Pierre", "date": "23/11/2021"}]
Supposons que le fichier json soit à l'url 'http://localhost:8888/z/z394.json'.
La page suivante va lire le json et l'afficher dans un tableau html (une balise <table>) qui sera inséré dans l'élément de la page ayant pour id "container" :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<style>
th,td {border:1px solid #000;}
</style>
</head>
<body>
<div id="container">
</div>
<script>
function insertTHAndTD(tr,b)
{
// tr est ici un élément html <tr>
// b est un tableau de 2 éléments, le 1er est un libellé et le 2e une valeur
// on crée un <th>
let th=document.createElement("TH");
// on crée un <td>
let td=document.createElement("TD");
// on met le 1re élément de b dans le <th>
th.appendChild(document.createTextNode(b[0]));
// on ajoute le <th> au <tr>
tr.appendChild(th);
// on met le 2e élément de b dans le <td>
td.appendChild(document.createTextNode(b[1]));
// on ajoute le <td> au <tr>
tr.appendChild(td);
}
function insertTR(table,a)
{
// table est ici un élément html <table>
// a est un tableau dont chaque élément est lui-même un tableau de 2 éléments, le 1er élément étant un libellé et le 2e une valeur
// on crée un élément <tr>
let tr=document.createElement("TR");
// pour chaque élément de a (ces éléments contiennent à ce stade un libellé et une valeur), on ajoute un <th> et un <td>
a.forEach(b=>insertTHAndTD(tr,b));
// on ajoute le <tr> dans l'élément <table>
table.appendChild(tr);
}
async function load()
{
let u='http://localhost:8888/z/z394.json';
// on lit le json
let o=await (await fetch(u)).json();
// on crée un élément <table>
let table=document.createElement("TABLE");
// pour chaque ligne du json, on ajoute une balise <tr> dans l'élément <table>
// au passage, on transforme chaque objet du json en tableau
o.forEach(a=>insertTR(table,Object.entries(a)));
// on ajoute <table> dans la <div> ayant pour id "container"
document.getElementById("container").appendChild(table);
}
load();
</script>
</body>
</html>
Amicalement,
