Problème avec JSON

Résolu/Fermé
Mac11
Messages postés
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
- 8 avril 2018 à 17:45
jordane45
Messages postés
35510
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mai 2022
- 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


4 réponses

jordane45
Messages postés
35510
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mai 2022
4 164
8 avril 2018 à 18:08
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);
}


0
Mac11
Messages postés
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12
8 avril 2018 à 18:53

<!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"
}
0
Mac11
Messages postés
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12
8 avril 2018 à 18:54
mais, je ne vois pas où mettre cette boucle
0
jordane45
Messages postés
35510
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
28 mai 2022
4 164
8 avril 2018 à 18:58
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 ??!!
0
Mac11
Messages postés
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12
8 avril 2018 à 19:17
<!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>
0
Mac11
Messages postés
146
Date d'inscription
samedi 15 juin 2013
Statut
Membre
Dernière intervention
6 novembre 2020
12
8 avril 2018 à 19:18
$(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>');
		});
	}); 
});
0