Problème avec $.getJSON

Mac11 Messages postés 145 Date d'inscription Statut Membre Dernière intervention -
Mac11 Messages postés 145 Date d'inscription Statut Membre Dernière intervention - 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

Afficher la suite

6 réponses

Réponse 1 / 6

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 145 Date d'inscription Statut Membre Dernière intervention 12

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

Mac11 Messages postés 145 Date d'inscription Statut Membre Dernière intervention 12

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 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

Et pour mes autres questions ?

Mac11 Messages postés 145 Date d'inscription Statut Membre Dernière intervention 12

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 145 Date d'inscription Statut Membre Dernière intervention 12

console

Mac11 Messages postés 145 Date d'inscription Statut Membre Dernière intervention 12

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

Réponse 3 / 6

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 145 Date d'inscription Statut Membre Dernière intervention 12

Réponse

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 145 Date d'inscription Statut Membre Dernière intervention 12

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

J voulais parler du fichier json

Réponse 6 / 6

Mac11 Messages postés 145 Date d'inscription Statut Membre Dernière intervention 12

Ok, excuse moi.

Votre réponse