Réception

Problème avec JSON

Résolu

Mac11 -

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

4 réponses

jordane45 Modérateur

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 Auteur


<!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 Auteur
mais, je ne vois pas où mettre cette boucle

0

jordane45 Modérateur

Ben.... là où tu veux récupérer les données....
c'est à dire dans

$.getJSON('json/concert.json', function(donnees) {

  // ICI
});

NB: Dans le lien que je t'ai donné pour les balises de code... il est y est indiqué qu'il faut préciser le LANGAGE afin que la coloration syntaxique s'applique. (il serait bien également de faire de l'indentation... )
Exemple.. au lieu de :


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

moi j'ai : (en indiquant "js" dans les balises de code : <code js></code> )

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

C'est plus joli et plus lisible non ??!!

Mac11 Auteur

<!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> 
              <div id="r">

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

Mac11 Auteur

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

Mac11 Auteur

La console m'affiche cela

jordane45 Modérateur

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

Mac11 Auteur

Voila

jordane45 Modérateur

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

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

jordane45 Modérateur

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 Auteur
Bravo jordane45 ça fonctionne... merci. Juste par un manque d'une paire de crochet... whoa.
Merci encore pour ton aide

0
1. jordane45 Modérateur
  
  Pense à mettre le sujet en résolu.
  
  0

Problème avec JSON

4 réponses

Discussions similaires

Newsletters