Problème avec JSON

Résolu

Réception

Mac11 Messages postés 145 Date d'inscription Statut Membre Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 8 avril 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 bin - Guide
Fichier epub - Guide
Fichier rar - Guide
Comment réduire la taille d'un fichier - Guide
Fichier .dat - Guide

4 réponses

Réponse 1 / 4

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

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 145 Date d'inscription Statut Membre Dernière intervention 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 145 Date d'inscription Statut Membre Dernière intervention 12

mais, je ne vois pas où mettre cette boucle

Réponse 2 / 4

Mac11 Messages postés 145 Date d'inscription Statut Membre Dernière intervention 12

La console m'affiche cela

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

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 145 Date d'inscription Statut Membre Dernière intervention 12

Voila

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

Ton fichier JSON n'est pas correct.
Essaye avec ça

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

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

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('<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>');
			});
		});
	}); 
});

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.

Réponse 4 / 4

Mac11 Messages postés 145 Date d'inscription Statut Membre Dernière intervention 12

Bravo jordane45 ça fonctionne... merci. Juste par un manque d'une paire de crochet... whoa.
Merci encore pour ton aide

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

Pense à mettre le sujet en résolu.

Discussions similaires

Google : récupérer ma boîte Gmail

comment rétablir la réception d'e-mail

Que faire en cas de problème de réception mails ?

Outlook 2016 - Pas de réception

Certaines chaines TNT non reçues

accusé réception

Votre réponse

Discussions similaires