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

Signaler
Messages postés
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
-
Messages postés
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
-
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
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 489
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
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12
{
	"couleur": "noir",
	"voiture": "porsche",
	"annee": "1997"
},
{
	"couleur": "bleu",
	"voiture": "opel",
	"annee": "1996"
}
Messages postés
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12
Oui clairement c'est mieux... J'ai fait quelques tests mais je ne trouve pas
Messages postés
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 489
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
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12
$(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
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 489
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
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12
La console m'affiche cela
Messages postés
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 489
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
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12
Voila

Messages postés
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 489
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
32477
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 mai 2021
3 489
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
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12


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