Problème avec JSON [Résolu/Fermé]

Signaler
Messages postés
144
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
21 septembre 2020
-
Messages postés
29738
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
-
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


4 réponses

Messages postés
29738
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 839
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);
}


Messages postés
144
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
21 septembre 2020
10
{
	"couleur": "noir",
	"voiture": "porsche",
	"annee": "1997"
},
{
	"couleur": "bleu",
	"voiture": "opel",
	"annee": "1996"
}
Messages postés
144
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
21 septembre 2020
10
Oui clairement c'est mieux... J'ai fait quelques tests mais je ne trouve pas
Messages postés
29738
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 839
Dans le code que tu nous montres tu n'as fait aucun test... c'est le même qu'au début.
Donc montres nous ce que tu as testé... on verra pour t'aider à le corriger.

NB: Pense à regarder dans la console de ton navigateur si des choses s'affichent (comme d'éventuelles erreurs... )
Messages postés
144
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
21 septembre 2020
10
$(function() {
	$('#charger').click(function() { 
		
		$.getJSON('json/concert.json', function(donnees) {
			$.each(donnees, function (index, voiture) {
				console.log(voiture);
				$('#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>');
			});
		});
	}); 
});


Je n'ai aucun message d'erreur dans la console, et lorsque je clique sur le bouton charger rien ne s'affiche
Messages postés
29738
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 839
Que donne ce code ? (dans la console)
$(function() {
  $('#charger').click(function() { 
     console.log('chargement en cours...');
     $.getJSON('json/concert.json', 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);
      });
   }); 
});
Messages postés
144
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
21 septembre 2020
10
La console m'affiche cela
Messages postés
29738
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 839
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);
          }
      });
    });
  });
Messages postés
144
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
21 septembre 2020
10
Voila

Messages postés
29738
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 839
Ton fichier JSON n'est pas correct.
Essaye avec ça
[
  {
    "couleur": "noir",
    "voiture": "porsche",
    "annee": "1997"
  },
  {
    "couleur": "bleu",
    "voiture": "opel",
    "annee": "1996"
  }
]
Messages postés
29738
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 839
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.
Messages postés
144
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
21 septembre 2020
10


Bravo jordane45 ça fonctionne... merci. Juste par un manque d'une paire de crochet... whoa.
Merci encore pour ton aide
Messages postés
29738
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 839
Pense à mettre le sujet en résolu.