SyntaxError: JSON.parse: unexpected character at line

**cc85** · 23/08/2023, 23h39

Bonsoir,

Dans un script, je crée un tableau

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
let act = document.getElementsByClassName('activite');
  let com = document.getElementsByClassName('comment');
  for (let i = 0; i < items.length; i++) {
    let tabBdd = {
      'annee' : i,
      'activite' : act[i].textContent,
      'comment' : com[i].textContent
    }
  tableauBdd.push(tabBdd);}

Puis le converti en json

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

let tabJson = JSON.stringify(tableauBdd);

Un "console.log(tabJson)" => ok

Je le passe à un fichier php (pour enregistrer dans la bdd)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$.ajax({
  url : 'ecrireBdd.php',
  type : 'POST', 
  dataType : 'json',
  data : tabJson,
  success : function(resultat, statut) {
    alert('Données enregistrées');},
  error : function(resultat, statut, erreur) {
    alert("Erreur !!!! " + erreur);}
});

Dans mon fichier PHP

- Je mets en en-tête :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

header('Content-type: application/json; charset=UTF-8');

- Dans ma requête, je récupère bien un fichier JSON Nom : img01.png
Affichages : 215
Taille : 2,6 Ko

- Mon fichier json récupéré

[{"annee":0,"activite":"Activite principale","comment":"Commentaires"},{"annee":1,"activite":"?","comment":""},{"annee":2,"activite":"?","comment":""},{"annee":3,"activite":"?","comment":""},{"annee":4,"activite":"?","comment":""},{"annee":5,"activite":"?","comment":""},{"annee":6,"activite":"?","comment":""},{"annee":7,"activite":"?","comment":""},{"annee":8,"activite":"?","comment":""},{"annee":9,"activite":"?","comment":""},{"annee":10,"activite":"?","comment":""},{"annee":11,"activite":"?","comment":""},{"annee":12,"activite":"?","comment":""},{"annee":13,"activite":"?","comment":""},{"annee":14,"activite":"?","comment":""},{"annee":15,"activite":"?","comment":""},{"annee":16,"activite":"Jeux olympiques","comment":"Lancer parpaings"},{"annee":17,"activite":"Tyrolienne","comment":""},{"annee":18,"activite":"Kermesse","comment":""},{"annee":19,"activite":"Puy du Fou","comment":""},{"annee":20,"activite":"Pac Man","comment":""},{"annee":21,"activite":"Baby foot","comment":""},{"annee":22,"activite":"Jeu de piste","comment":"René la taupe"},{"annee":23,"activite":"Fusée à eau","comment":""},{"annee":24,"activite":"Tir à l'arc","comment":""},{"annee":25,"activite":"Voiture F1","comment":""},{"annee":26,"activite":"Guiness Irlande","comment":""},{"annee":27,"activite":"Fort Boyard","comment":"Pisse partout"},{"annee":28,"activite":"COVID ?","comment":""},{"annee":29,"activite":"Avion papier ?","comment":""},{"annee":30,"activite":"Chevaux ?","comment":""},{"annee":31,"activite":"?","comment":"Mamadou"},{"annee":32,"activite":"?","comment":""},{"annee":33,"activite":"Koh lanouta","comment":""},{"annee":34,"activite":"Pokémon go","comment":""},{"annee":35,"activite":"Soirée créole","comment":"Musique Issue de secours"},{"annee":36,"activite":"Harry Potter","comment":"Quidditch"},{"annee":37,"activite":"Soirée créole","comment":"Combat coq"},{"annee":38,"activite":"Cluedo","comment":""},{"annee":0,"activite":"Activite principale","comment":"Commentaires"},{"annee":1,"activite":"?","comment":""},{"annee":2,"activite":"?","comment":""},{"annee":3,"activite":"?","comment":""},{"annee":4,"activite":"?","comment":""},{"annee":5,"activite":"?","comment":""},{"annee":6,"activite":"?","comment":""},{"annee":7,"activite":"?","comment":""},{"annee":8,"activite":"?","comment":""},{"annee":9,"activite":"?","comment":""},{"annee":10,"activite":"?","comment":""},{"annee":11,"activite":"?","comment":""},{"annee":12,"activite":"?","comment":""},{"annee":13,"activite":"?","comment":""},{"annee":14,"activite":"?","comment":""},{"annee":15,"activite":"?","comment":""},{"annee":16,"activite":"Jeux olympiques","comment":"Lancer parpaings"},{"annee":17,"activite":"Tyrolienne","comment":""},{"annee":18,"activite":"Kermesse","comment":""},{"annee":19,"activite":"Puy du Fou","comment":""},{"annee":20,"activite":"Pac Man","comment":""},{"annee":21,"activite":"Baby foot","comment":""},{"annee":22,"activite":"Jeu de piste","comment":"René la taupe"},{"annee":23,"activite":"Fusée à eau","comment":""},{"annee":24,"activite":"Tir à l'arc","comment":""},{"annee":25,"activite":"Voiture F1","comment":""},{"annee":26,"activite":"Guiness Irlande","comment":""},{"annee":27,"activite":"Fort Boyard","comment":"Pisse partout"},{"annee":28,"activite":"COVID ?","comment":""},{"annee":29,"activite":"Avion papier ?","comment":""},{"annee":30,"activite":"Chevaux ?","comment":""},{"annee":31,"activite":"?","comment":"Mamadou"},{"annee":32,"activite":"?","comment":""},{"annee":33,"activite":"Koh lanouta","comment":""},{"annee":34,"activite":"Pokémon go","comment":""},{"annee":35,"activite":"Soirée créole","comment":"Musique Issue de secours"},{"annee":36,"activite":"Harry Potter","comment":"Quidditch"},{"annee":37,"activite":"Soirée créole","comment":"Combat coq"},{"annee":38,"activite":"Cluedo","comment":""}]

est validé par https://jsonlint.com/

Mais, dès que je veux l'utiliser dans le php, j'ai la réponse :

SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data

Je suis en test sous Wampserver 3.3.1 sous W11 et PHP 8.2.3.
J'ai testé avec PHP 7.4.9 => idem

J'ai vidé le cache du navigateur => idem

Je ne sais plus quoi faire.

Je vous remercie pour les éléments de réponse que vous pourrez m'apporter...

**Toufik83** · 24/08/2023, 01h11

Bonjour,

L'objet envoyé par ajax est convertit en chaine de caractère avec let tabJson = JSON.stringify(tableauBdd);, et donc vous devriez le reconvertir en tableau au niveau PHP avec json_decode();
Comment tu utilises l'objet JSON dans le fichier PHP ?

**cc85** · 24/08/2023, 08h24

Bonjour et merci,

Dans mon .php, normalement je fais

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if (isset($_POST['tabJson'])) {
  $tabBdd = json_decode($_POST['tabJson']);}

et la suite du traitement.

Et c'est à ce moment là que j'ai une erreur.

Je teste avec Firebug :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  fb('debut');
  if (isset($_POST['tabJson'])) {
    $tabBdd = json_decode($_POST['tabJson']);
    fb('ok');
  } else {
    fb('ko');
  }
  fb('fin');

J'ai "ko".

Je viens de tester sans rien dans mon .php, juste <?php php> et j'ai l'erreur...

Nb : dans la surveillance réseau, j'ai bien les données de formulaire correspondant à mes données mais le type est "html"
Si je rajoute en en-tête du .php (comme je fais habituellement) header('Content-type: application/json; charset=UTF-8'), j'ai bien un type "json"

Bonne journée

**Séb.** · 24/08/2023, 08h30

Mais, dès que je veux l'utiliser dans le php, j'ai la réponse :
SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data

Qui donne cette erreur ?

Le JSON que tu as collé est bon, et PHP arrive bien à le décoder => https://onlinephp.io/c/21daf

S'il y en a un, regarde le JSON de réponse.

**Toufik83** · 24/08/2023, 13h37

Envoyé par cc85

Je teste avec Firebug :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
  fb('debut');
  if (isset($_POST['tabJson'])) {
    $tabBdd = json_decode($_POST['tabJson']);
    fb('ok');
  } else {
    fb('ko');
  }
  fb('fin');

J'ai "ko".

Et si tu essaies d'ajouter le nom de variable dans data d'ajax :data : {"tabJson":tabJson}, c'est toujours ko ?

Puis je vois que l'erreur est relative à JS SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data et pas au PHP, plus précisément a JSON.parse() alors que je ne vois nulle part JSON.parse dans ton code.

**cc85** · 25/08/2023, 10h43

Bonjour,

Envoyé par Séb.

Qui donne cette erreur ?

Nom : img02.png
Affichages : 178
Taille : 5,7 Ko

Envoyé par Toufik83

Et si tu essaies d'ajouter le nom de variable dans data d'ajax :data : {"tabJson":tabJson}, c'est toujours ko ?

C'est tout bon !!! Merci !!!

Enfin presque...

J'ai bien maintenant ok quand je décode 'tabJson' et je récupère bien 39 valeurs

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fb('Nombre de valeurs ' . count($tabBdd));

Mais j'ai toujours l'erreur :
- Dans la console en réponse à la requête XHR POST
- En retour de la fonction $.ajax en erreur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
error : function(resultat, statut, erreur) {
  console.log(resultat); //Permet d'afficher + de détails dans la console
  alert("Erreur !!!! " + erreur);

Je continue...

**cc85** · 25/08/2023, 11h39

Envoyé par Toufik83

Puis je vois que l'erreur est relative à JS SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data et pas au PHP, plus précisément a JSON.parse() alors que je ne vois nulle part JSON.parse dans ton code.

JSON.parse est une fonction JS. Je l'utilise en test dans mon script juste après 'stringify' et avant '$.ajax' et ça s'affiche bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
let obj = JSON.parse(tabJson);
for (let i=0; i<obj.length;i++) {
  console.log(obj[i].annee, obj[i].activite, obj[i].comment);}

Le message

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data

je l'ai en retour de '$.ajax'

**Toufik83** · 25/08/2023, 12h46

Si ajax passe au bloc error au lieu de success, ceci dit qu'il y'a des erreurs dans le fichier PHP (niveau serveur), et si tu veux les identifier il faudrait seulement les afficher avec un console.log()

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
error : function(resultat, statut, erreur) {
  console.log("résultat :",resultat,", Erreur :",erreur); //Permet d'afficher + de détails dans la console
}

Est-ce que le fichier PHP retourne une réponse json avec json_encode() ou pas ? car c'est obligatoire vu que tu utilises le type de données json dataType:"json" dans les paramètres d'ajax.

D'après ce que je vois, l'erreur de JSON.parse() est invoquée par $.ajax même et pas par la ligne let obj = JSON.parse(tabJson);, parce $.ajax décode la réponse automatiquement avec JSON.parse lorsque le type de données est json, et donc si le fichier PHP ne renvoie pas une réponse json valide, l'erreur est immédiatement affichée.

Peux-tu nous montrer tout le fichier PHP ?

**cc85** · 25/08/2023, 13h42

Envoyé par Toufik83

Si ajax passe au bloc error au lieu de success, ceci dit qu'il y'a des erreurs dans le fichier PHP (niveau serveur), et si tu veux les identifier il faudrait seulement les afficher avec un console.log()

Le résultat :
Nom : img03.png
Affichages : 173
Taille : 57,5 Ko

responsetext =
Nom : img04.png
Affichages : 173
Taille : 58,5 Ko

Peux-tu nous montrer tout le fichier PHP ?

En fait, j'ai pas encore grand chose car je n'arrive pas a récupérer les données mais la suite c'est l'enregistrement en bdd.
Pour l'instant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php header('Content-type: application/json; charset=UTF-8');
 
	session_start();
	//FirePHP avec session_start si erreur
	include('firebug.php');
 
	fb('mb_detect_encoding : ' . mb_detect_encoding($_POST['tabJson']));
 
	if (isset($_POST['tabJson'])) {
		$tabBdd = json_decode($_POST['tabJson']);
		fb('isset : ok');
	} else {
		fb('isset : ko');
	}
 
	fb('Nombre de valeurs de $tabBdd : ' . count($tabBdd));
 
	fb('Debut affichage');
	foreach ($tabBdd as $cle => $valeur) {
		fb('liste de $tabBdd ' . $valeur . $cle);
	}
?>

et en affichage de firebug :

Nom : img05.png
Affichages : 172
Taille : 5,3 Ko

Donc je récupère bien un json en UTF8, il existe, converti il y a bien 39 lignes, mais pb de lecture.

D'après ce que je vois, l'erreur de JSON.parse() est invoquée par $.ajax même et pas par la ligne let obj = JSON.parse(tabJson);, parce $.ajax décode la réponse automatiquement avec JSON.parse lorsque le type de données est json, et donc si le fichier PHP ne renvoie pas une réponse json valide, l'erreur est immédiatement affichée.

C'est sans doute ici le pb car si je vide mon fichier php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<?php ?>

J'ai toujours cette erreur

**Toufik83** · 25/08/2023, 14h03

Ben voilà, le fichier PHP ne retourne aucun objet json et en plus il écrit des chaînes de caractères avec les fb, et une chaîne de caractère n'est pas un JSON valide.

Donc supprimes tous les fb de ton fichier PHP et utilises un tableau pour stocker les valeurs dont tu as besoin, par exemple :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php 
        session_start();
        $data=[];//créer un tableau ici que tu peux utiliser pour stocker tes informations des fb
        header('Content-type: application/json; charset=UTF-8');
        //FirePHP avec session_start si erreur
	include('firebug.php');
        $data["mb_detect_encoding"]=mb_detect_encoding($_POST['tabJson']);
	if (isset($_POST['tabJson'])) {
                $tabBdd = json_decode($_POST['tabJson']);
                $data["nbrValeur"]=count($tabBdd); 
                $data["liste"]=$tabBdd;//tout simplement
                $data["isset"]="ok";
	} else {
                $data["isset"]="ko";
	}
       echo json_encode($data); //puis à la fin c'est obligatoire 
?>

Du côté client et pour exploiter les variables de retour json_encode($data), il suffit d'écrire ceci dans success:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
success : function(resultat, statut) {
    console.log('Succès, Données enregistrées..., retour json :',resultat,", Detecte encoding est :",resultat.mb_detect_encoding,", isset :",resultat.isset);
   if(resultat.nbrValeur && resultat.liste)
      console.log("Nombre de valeurs :",resultat.nbrValeur,", Liste :",resultat.liste);
}

Sinon et si tu veux garder tes fb et ne rien retourner avec le fichier PHP, tu n'a qu'à supprimer dataType:"json" des paramètres, comme ça ajax saura que le retour est du texte HTML et ne devrait pas être convertit en json.

En résumé :

Avec dataType:"json" => pas de fb ou echo dans le fichier PHP à-part celle à la fin (qui est obligatoire).
Sans dataType:"json" tu es libre de mettre tant de fb et echo aucun souci...

**cc85** · 25/08/2023, 15h58

Je n'ai sans doute pas été assez clair mais je ne cherche pas à récupérer des données de .php via ajax (ce module fonctionne sans problème) mais c'est l'inverse : ce sont mes données html éventuellement modifiées que je récupère via js dans un tableau, que je souhaite passer dans .php pour modifier ma base de données.

Finalement, j'ai abandonné le format json et je passe directement mon tableau js :

Mon script

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
	url : 'ecrireBdd.php',
	type : 'POST', 
	data : {'tabBdd' : tableauBdd},
	success : function(resultat, statut) {
		alert('Données enregistrées');
	},
	error : function(resultat, statut, erreur) {
		console.log("résultat :",resultat,", Erreur :",erreur); //Permet d'afficher + de détails dans la console
		alert("Erreur !!!! " + erreur);
	}
});

le fichier .php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
if (isset($_POST['tabBdd'])) {
	foreach ($_POST['tabBdd'] as $cle => $valeur) {
		fb ($valeur['annee'] . ' ' . $valeur['activite'] . ' ' . $valeur['comment']);
	}
} else {
	fb('isset : ko');
}