Problème avec $.getJSON

Fermé

Mac11 Messages postés 146 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 - 9 mars 2018 à 16:09
Mac11 Messages postés 146 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 - 11 mars 2018 à 10:55

Bonjour,

Je suis en train de bloquer. J'utilise la technologie "Wamp" pour la partie serveur.

Mon problème, c'est que je n'arrive pas à récupérer les données dans le fichier fichier.json

<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<title>Charger des Données Codées en JSON</title>
	</head>

	<body>
		<button id="charger">Charger et traiter les données</button>
		<div id="r">Cliquez sur "Charger et traiter les données" pour lancer la lecture et le traitement des données JSON</div>

		<script src="jquery.js"></script>
		<script>
		  $(function() {
		    $('#charger').click(function() {
		        $.getJSON('fichier.json', function(donnees) {
		        $('#r').html('<p><b>Nom</b> : ' + donnees.nom + '</p>');
		        $('#r').append('<p><b>Age</b> : ' + donnees.age + '</p>');
		        $('#r').append('<p><b>Ville</b> : ' + donnees.ville + '</p>');
		        $('#r').append('<p><b>Domaine de compétences</b> : ' + donnees.domaine + '</p>');
		      });
		    });  
		  });
		</script>
	</body>
</html>


{
  "nom": "Pierre Durand",
  "age": "27",
  "ville": "Paris",
  "domaine": "HTML5, CSS3, JavaScript"
}

Merci pour votre aide.

Mac

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
9 mars 2018 à 21:05

Bonjour,
Le script fonctionne parfaitement.
Tes fichiers sont-ils bien encodés en utf8 sans bom ?
Quelle version de jquery as tu ?
Le script est-il bien dans le même dossier que ton fichier html ?

N'aurais tu pas des espaces en trop dans ton json avant la première accolade ?
Ton fichier devrait ne contenir que :

{
  "nom": "Pierre Durand",
  "age": "27",
  "ville": "Paris",
  "domaine": "HTML5, CSS3, JavaScript"
}

Pour vérifier l'encodage des fichiers, voir chapitre 1 de ce lien :
https://forums.commentcamarche.net/forum/affich-37584944-php-html-caracteres-accentues-et-l-utf8

Si malgré ça ça ne fonctionne toujours pas, peux tu regarder dans la console de ton navigateur si tu n'aurais pas des messages d'erreur ?

Mac11 Messages postés 146 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 12
9 mars 2018 à 21:59

Merci de me répondre.

Le fichier charger-des-donnees-codees-en-json.html est bien en utf-8.
L' autre fichier (fichier.json) où se trouve les données n'a pas de balise <meta>.
Le version : jquery-3.2.1.js.
Je ne pense pas qu'il y ait des espaces en trop.

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
9 mars 2018 à 22:43

Pourquoi me parles tu de balises meta ??
Tu as été voir le lien que je t'ai donné ???!!

Mac11 Messages postés 146 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 12
10 mars 2018 à 17:46

Oui mes fichiers sont bien encodés en utf-8. Au début, je pensais que tu faisais allusion à la balise <meta charset="utf-8 />.
Oui je suis allé le lien que tu m'as donné.

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
10 mars 2018 à 18:08

Et pour mes autres questions ?

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

Le version : jquery-3.2.1.js.
Oui tous les fichiers sont dans le même dossier

Réponse 2 / 6

Mac11 Messages postés 146 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 12
10 mars 2018 à 21:25

console

Mac11 Messages postés 146 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 12
10 mars 2018 à 21:28

après avoir cliqué sur le bouton qui est censé faire apparaître les données

Réponse 3 / 6

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
10 mars 2018 à 21:44

Tu peux remplacer tout ton js par ça et me montrer le résultat dans la console stp :

console.log('Avant le debut du script....');
$(function() {
  console.log('jquery ready !');
  $('#charger').click(function() {
    console.log('click sur le bouton');
      
    $.getJSON('fichier.json', function(donnees){
      console.log('getJson runing...');
    })
    .done(function() { 
      console.log('getJSON request succeeded!'); 
      $('#r').html('<p><b>Nom</b> : ' + donnees.nom + '</p>');
      $('#r').append('<p><b>Age</b> : ' + donnees.age + '</p>');
      $('#r').append('<p><b>Ville</b> : ' + donnees.ville + '</p>');
      $('#r').append('<p><b>Domaine de compétences</b> : ' + donnees.domaine + '</p>');
     })
    .fail(function(jqXHR, textStatus, errorThrown) { 
      alert('getJSON request failed! ' + textStatus); 
    });
        
  });
});

Réponse 4 / 6

Mac11 Messages postés 146 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 12
10 mars 2018 à 22:27

Réponse

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
10 mars 2018 à 22:55

Tu as donc un souci sur ton fichier source.
Tu peux me montrer (via une capture ecran) son contenu exacte ainsi que son encodage ?

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 6

Mac11 Messages postés 146 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 12
10 mars 2018 à 23:06

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
10 mars 2018 à 23:20

J voulais parler du fichier json

Réponse 6 / 6

Mac11 Messages postés 146 Date d'inscription samedi 15 juin 2013 Statut Membre Dernière intervention 6 novembre 2020 12
11 mars 2018 à 10:55

Ok, excuse moi.

Newsletters