Problème avec JSON

Résolu

Réception

Mac11 Messages postés 158 Statut Membre -
jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention - 8 avr. 2018 à 22:23

Bonjour,
Bonjour,
Je suis perdu, et j'ai du mal à comprendre. Lorsque je mets ce code dans le fichier JSON cela fonctionne :


{
	"couleur": "noir",
	"voiture": "porsche",
	"annee": "1997"
}

Et lorsque je mets ce code dans le fichier JSON cela ne fonctionne plus (voir image ci-dessous).

Quelqu'un peut-il m'aider ? je voudrais afficher également les données de l'Opel.

Merci

Mac

Afficher la suite

A voir également:

Fichier json exemple
Fichier epub - Guide
Fichier bin - Guide
Exemple de code ascii - Guide
Fichier .dat - Guide
Fichier 7z - Guide

4 réponses

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

Bonjour,

Pour commencer... ici on poste son code directement. On n'en met pas des images.... car ça ne nous permet pas d'en faire des copier/coller.
Voir ici comment utiliser les balises de code : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code

Ensuite, dans ton second exemple.. tu as deux "objets" json.
Il te faut donc boucler dessus.

$.each(donnees, function (index, voiture) {
   //ici ton code pour utiliser le contenu de ta boucle...   
   //par exemple
   console.log(voiture);
}

Mac11 Messages postés 158 Statut Membre 12


<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Concerts</title>

		<script src="js/jquery-3.3.1.min.js"></script>
		<script src="js/concert.js"></script>
	</head>

	<body>
		<button id="charger">Charger</button> <!-- afficher losqu'on appui sur le bouton -->
		<div id="r">

		</div>
	</body>
</html>


$(function() {
	$('#charger').click(function() { 
		$.getJSON('json/concert.json', function(donnees) {
			$('#r').html('<p><b>Couleur</b> : ' + donnees.couleur + '</p>');
			$('#r').append('<p><b>Voiture</b> : ' + donnees.voiture + '</p>');
			$('#r').append('<p><b>Année</b> : ' + donnees.annee + '</p>');
		});
	}); 
});


{
	"couleur": "noir",
	"voiture": "porsche",
	"annee": "1997"
},
{
	"couleur": "bleu",
	"voiture": "opel",
	"annee": "1996"
}

Mac11 Messages postés 158 Statut Membre 12

mais, je ne vois pas où mettre cette boucle
0

Mac11 Messages postés 158 Statut Membre 12

La console m'affiche cela

jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832

ok. je n'étais pas sûr.
Bon.. et ce code là :

$(function() {
    $('#charger').click(function(){ 
      console.log('chargement en cours...');
      var url = 'json/concert.json';
      $.ajax({
        dataType: "json",
        url: url,
        success: function(donnees) {
            console.log('les donnees du fichier :');
            console.log(donnees);
            $.each(donnees, function (index, voiture){
              console.log('boucle : ' + index);
              console.log(voiture);
              $('#r').append('<p><b>Couleur</b> : ' + voiture.couleur + '</p>');
              $('#r').append('<p><b>Voiture</b> : ' + voiture.voiture + '</p>');
              $('#r').append('<p><b>Année</b> : ' + voiture.annee + '</p>');
            });
          },
        error :function(jqXHR, textStatus, errorThrown) {
            console.log("error ! " + textStatus + ' : '   + jqXHR.responseText);
          }
      });
    });
  });

Réponse 3 / 4
Mac11 Messages postés 158 Statut Membre 12

Voila
0
1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
 
 Ton fichier JSON n'est pas correct.
 Essaye avec ça
 [ { "couleur": "noir", "voiture": "porsche", "annee": "1997" }, { "couleur": "bleu", "voiture": "opel", "annee": "1996" } ]
 
 0
2. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
 
 Une fois ton fichier json corrigé, tu peux remettre ton ancien code
 $('#charger').click(function() { $.getJSON('json/concert.json', function(donnees) { $.each(donnees, function (index, voiture) { console.log(voiture); $('#r').append('Couleur : ' + voiture.couleur + ''); $('#r').append('Voiture : ' + voiture.voiture + ''); $('#r').append('Année : ' + voiture.annee + ''); }); }); }); });
 
 mais perso.. je préfère la syntaxe du $.ajax qui permet d'avoir une méthode "error" et donc savoir lorsqu'il y a un souci de quoi il retourne.
 
 0
Réponse 4 / 4
Mac11 Messages postés 158 Statut Membre 12

Bravo jordane45 ça fonctionne... merci. Juste par un manque d'une paire de crochet... whoa.
Merci encore pour ton aide
0
1. jordane45 Messages postés 30427 Date d'inscription Statut Modérateur Dernière intervention 4 832
  
  Pense à mettre le sujet en résolu.
  
  0

Problème avec JSON

4 réponses

Discussions similaires

Newsletters