Qu'est-ce que JSON et comment gérer une erreur de «jeton inattendu»

Dans cet article, vous apprendrez ce qu'est JSON et comment vous pouvez gérer les erreurs survenant lors de l'analyse des données JSON, telles que «Jeton inattendu <dans JSON à la position 0».

Qu'est-ce que JSON

JSON, qui est un acronyme pour JavaScript Object Notation, est l'un des formats de données les plus populaires utilisés pour la transmission de données. C'est un format léger et se compose de paires nom-valeur. Les valeurs peuvent être des chaînes, des tableaux ou toute autre donnée qui peut être sérialisée.

Autrefois, XML était principalement utilisé pour échanger des données, mais depuis que JSON est apparu, il est souvent utilisé pour remplacer XML. Un fichier JSON doit se terminer par l'extension .json .

Vous trouverez ci-dessous un exemple de format JSON.

 {
     "name" :   "animals "
    " animaux ":   [
        " Dog "
        " Cat "
        " Mouse "[19659014] "Pig" 
         "Bear" 
  ] 
   "hobbies" :   {
         "football" :   false 
         "reading" :   true 
  } 
} 

Le format JSON est assez similaire aux objets JavaScript, mais ce n'est pas toujours le cas. Il est important de se rappeler que chaque nom de propriété doit être placé entre guillemets.

 {
  x :   4 
} 


 {
   "x" :   4 
} 

Jeton inattendu <dans JSON à la position 0

De de temps en temps, lorsque vous travaillez avec des données JSON, vous risquez de tomber sur des erreurs concernant le formatage JSON. Par exemple, si vous essayez d'analyser un JSON mal formé avec la fonction JSON.parse () ou utilisez la méthode .json () sur l'objet fetch cela peut entraîner la levée d'une exception JavaScript. Mais ne vous inquiétez pas, ce n’est pas la fin du monde et nous pouvons y faire face. Il peut y avoir différentes causes à cela, alors voyons ce que nous pouvons faire.

Mon JSON est-il correctement formaté?

Les projets nécessitent parfois une configuration qui est envoyée au client depuis un serveur. Juste pour que vous le sachiez, stocker les détails de la configuration en tant que JSON sera plus rapide que d'utiliser un littéral d'objet, car les moteurs ont besoin de faire plus d'étapes lors de l'exécution d'un objet littéral que JSON.parse () par exemple. La comparaison des performances entre JSON et JavaScript n'est pas un sujet de cet article, elle ne sera donc pas abordée, mais si vous êtes intéressé, vous pouvez en savoir plus ici .

Si vous avez un fichier avec les données JSON, l'une des premières choses à faire est de s'assurer que les données sont correctement formatées. Il existe quelques sites qui peuvent vous aider. Ces formateurs vérifieront non seulement si votre JSON est correctement formaté, mais ils peuvent également corriger certaines erreurs, l'embellir ou le rendre compact.

Pour être honnête, l'une des erreurs dont je suis souvent coupable est d'utiliser guillemets simples au lieu de guillemets doubles. L'image ci-dessous montre comment un vérificateur de format peut vous simplifier la vie.

Si votre JSON est formaté correctement, il est temps de vérifier ce qui pourrait être erroné.

Mon JSON est formaté correctement.

«Jeton inattendu <dans JSON à la position 0» est l'erreur que j'ai le plus souvent constatée tout au long de mon travail en tant que développeur de logiciels. Cela se produit assez souvent dans une situation où la fonction fetch est utilisée pour envoyer une requête API à partir d'un client. Après avoir reçu une réponse d'un serveur, elle est généralement analysée en JSON.

 fetch  ( 'url' ) .  puis  ( response  =>  response .  json  () ) 

La ​​première chose à faire dans cette situation est de confirmer où l'erreur se produit exactement. Pour nous assurer que l'erreur se produit sur la ligne exacte que nous pensons qu'elle fait, nous pouvons envelopper le code d'analyse JSON dans un bloc try-catch. Vérifiez le code ci-dessous.

 fetch  ( "url" ) .  puis  ( async  response  => [19659013] {
       try   {
        const  data  =   wait  response .  json  () 
       console .  log  ( 'response data?'  data ) 
     }   catch  ( error )   {
       console .  log  ( "Une erreur s'est produite ici!" ) 
       console .  error  ( error ) 
     } 
    } ) 

Si c'est le coupable, alors il sera clairement visible dans le console des outils de développement, comme "Une erreur s'est produite ici!" sera affiché. Sinon, vous devrez peut-être le chercher ailleurs. Une bonne idée est parfois de commenter le code morceau par morceau pour voir quand une erreur cesse d'être générée. Vous pouvez également utiliser une instruction return anticipée.

L'étape suivante consiste à vérifier si les données que nous nous attendons à voir sont réellement envoyées par le serveur. Comme le montre l'image ci-dessous, dirigez-vous vers l'onglet «Réseau» dans DevTools, recherchez la requête et cliquez sur l'onglet «Réponse».

Dans cet exemple, nous pouvons voir une chaîne JSON envoyée depuis l'API swapi elle est donc correcte. Cependant, dans un cas différent, la réponse peut être au format XML ou le serveur peut avoir envoyé un fichier HTML. Le premier peut se produire si vous avez affaire à un serveur qui peut renvoyer des réponses différentes en fonction de l'en-tête de type de contenu fourni. Si tel est le cas, lorsque vous envoyez une requête, assurez-vous de spécifier l'en-tête content-type comme indiqué ci-dessous:

 fetch  ( 'url' [19659013] {
  méthode :  «GET» 
  en-têtes :   {
    «Content  -  Type» :  «application  /  json»
  } 
} ) .  puis  ( response  =>  response .  json  ([19659008]) ) 

Quant à ce dernier, j'ai vu le serveur envoyer un fichier HTML à quelques reprises. En général, cela s'explique par une URL incorrecte fournie à la méthode fetch ou la route du serveur API n'a pas été configurée correctement. Par exemple, si vous avez une application à page unique et un backend exécutant un serveur Express.js, il peut être configuré pour toujours servir un fichier index.html . Par conséquent, vérifiez toujours la configuration de vos URL et de vos routes API.

Conclusion

JSON est un format extrêmement populaire et couramment utilisé pour l'échange de données. Nous avons parlé de ce qu'est JSON et de ce que nous pouvons faire lorsqu'une erreur d'analyse est générée. Pour commencer, vérifiez toujours si les valeurs que vous traitez correspondent à ce que vous attendez d’elles et rappelez-vous que console.log () est votre ami.