[Résolu] Lire fichier Json avec boucle

Salut tous,
je maitrise à peu prêt PHP mais je suis une quiche en JS. Je viens donc requérir votre aide.
voila je genere un fichier json en php qui vient de ma BDD.
jusqu'à la pas de blem petit code.

  //Récupérer les lignes de la table users
  $res = $mysqli->query("SELECT * FROM markers");
  //Initialiser un tableau
  $data = array();
  //Récupérer les lignes
  while ( $row = $res->fetch_assoc())  {
     $data[] = $row;
  }
  //Afficher le tableau au format JSON
  echo json_encode($data);
//creer le fichier json
file_put_contents('donnees.json', json_encode($data));

cela me créer donc un fichier donnees.json.
style :

[{"id":"1","name":"Love.Fish","address":"580 Darling Street, Rozelle, NSW","lat":"-33.861034","lng":"151.171936","type":"restaurant"},{"id":"2","name":"Young Henrys","address":"76 Wilford Street, Newtown, NSW","lat":"-33.898113","lng":"151.174469","type":"bar"},{"id":"3","name":"Hunter Gatherer","address":"Greenwood Plaza, 36 Blue St, North Sydney NSW","lat":"-33.840282","lng":"151.207474","type":"bar"},{"id":"4","name":"The Potting Shed","address":"7A, 2 Huntley Street, Alexandria, NSW","lat":"-33.910751","lng":"151.194168","type":"bar"},{"id":"5","name":"Nomad","address":"16 Foster Street, Surry Hills, NSW","lat":"-33.879917","lng":"151.210449","type":"bar"},{"id":"6","name":"Three Blue Ducks","address":"43 Macpherson Street, Bronte, NSW","lat":"-33.906357","lng":"151.263763","type":"restaurant"},{"id":"7","name":"Single Origin Roasters","address":"60-64 Reservoir Street, Surry Hills, NSW","lat":"-33.881123","lng":"151.209656","type":"restaurant"},{"id":"8","name":"Red Lantern","address":"60 Riley Street, Darlinghurst, NSW","lat":"-33.874737","lng":"151.215530","type":"restaurant"}]

Donc c'est maintenant que ca se gatte.
comment je fait en JS pour récupérer et lire ce fichier (donnees.json) en faisant un boucle, afin de lire toutes les lignes.
Un petit bout de code serait le bienvenue.
Merci d'avance de votre aide
Cdt
Modifié par spawns (10 Mar 2021 - 18:39)

Bonjour,

Pas besoin de faire une boucle.

fetch('donnees.json').then(response => response.json()).then(data => {
	// data contient ici les données json sous la forme d'un array
	// faire tous les traitements concernant les données à partir d'ici
	// par exemple :
	console.log(data);
});

Amicalement,
Modifié par parsimonhi (10 Mar 2021 - 18:09)

ok merci,
mais comment je fais pour récupérer les valeurs du array en JS et les afficher ?

Bonjour,

Dans mon exemple, les données sont dans la variable data et sont affichées dans la console (pour voir ça, tu fais clic droit + inspecter, et tu cliques sur l'onglet console).

Mais tu peut afficher ces données où tu veux ailleurs. Tu veux les afficher où ?

Amicalement,
Modifié par parsimonhi (10 Mar 2021 - 18:14)

pour tester,
je voudrais simplement les afficher sur la même page.
Exemple afficher tous les noms les uns en dessous de autres.
Modifié par spawns (10 Mar 2021 - 18:22)

Bonjour,

Par exemple, le code suivant (que tu mets par exemple dans ta page dans une balise script juste avant la balise body) affiche la liste des noms qui sont dans ton json en fin de page.

fetch('donnees.json').then(response => response.json()).then(data => {
	// data contient ici les données json sous la forme d'un array
	// faire tous les traitements concernant les données à partir d'ici
	var e=document.createElement("div");
	var s="";
	data.forEach(a=>s+=a.name+"<br>");
	e.innerHTML=s;
	document.body.appendChild(e);
});

Amicalement;

Oui c'est ce que je cherchais a faire.

Il faut que j'analyse le code maintenant que je comprenne le truc.
merci beaucoup
@+
Cdt

Petite demande supplémentaire.
Comment je fais pour afficher plusieurs champs
Exemple : nom | adresse | etc...

Merci pour ta réactivité,
je venais de trouver le truc
merci@ toi
Cdt
Modifié par spawns (10 Mar 2021 - 18:43)