11552 sujets

JavaScript, DOM et API Web HTML5

Relier json a html

Bonjour, j'essaye de relier mon json a mon html? comment faire je n'y connais pas grand chose.
Dans mon json(url) j'ai des lignes de données: des objets avec chacun un nom, prénom, date... et je cherche à transformer toutes ces lignes en un tableau Html qui trie les données pas lignes pour chaque objet et colonnes.
Merci de votre aide
Modérateur
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,
Sujet clos
Aller à