Maison > interface Web > js tutoriel > Comment convertir une chaîne JSON en un tableau d'objets JSON à l'aide de JavaScript ?

Comment convertir une chaîne JSON en un tableau d'objets JSON à l'aide de JavaScript ?

WBOY
Libérer: 2023-08-27 17:33:02
avant
1562 Les gens l'ont consulté

如何使用 JavaScript 将 JSON 字符串转换为 JSON 对象数组?

JSON est utilisé pour échanger des données du client au serveur. JSON est très léger, facile à lire pour les humains et facile à analyser et à générer pour les machines. Souvent, lorsque nous obtenons des données au format chaîne, nous devons convertir ces données en tableau. Dans cet article, nous aborderons différentes manières de convertir une chaîne JSON en un tableau d'objets JSON à l'aide de JavaScript.

  • Utilisez la méthode JSON.parse()

  • Utilisez la fonction eval( )

Méthode 1 : utilisez la méthode JSON.parse()

La méthode JSON.parse est utilisée pour convertir une chaîne JSON en objet JSON. Il s'agit d'une manière très rapide et standard de travailler avec des données JSON. JSON.parse prend une chaîne en entrée et renvoie une valeur Javascript, un objet, un tableau, un booléen, une valeur nulle, etc. en fonction de la structure de la valeur d'entrée.

Exemple

Dans cet exemple, nous avons une chaîne JSON contenant des données pour diverses personnes, et nous utiliserons la méthode JSON.parse pour convertir cette chaîne JSON en un objet JSON.

<html>
<body>
   <h2>Convert JSON string to array of JSON objects using JSON.parse method</h2>
   <p>Click the following button to convert JSON string to an array of JSON objects</p><br>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"> </p>
   <script>
      function convert(){
         
         // Initialize the dummy JSON String
         let jsonString = '[ { "name" : "Ram", "age" : 20, "car" : "ford" },{ "name": "Shyam", "age" : "21", "car" : "tata" }, { "name" : "Mohan", "age" : 22, "car" : "toyota" } ]'
         
         // Conver the JSON String to JSON object
         let jsonObject = JSON.parse(jsonString);
         
         // Get the paragraph element
         let p = document.getElementById("result")
         
         /// Print the Object
         p.innerText += JSON.stringify(jsonObject);
         
         // Print the Object on Console
         console.log(jsonObject)
      }
   </script>
</body>
</html>
Copier après la connexion

Méthode 2 : Utiliser la fonction eval()

La fonction eval() en JavaScript est une fonction globale utilisée pour évaluer une chaîne en tant qu'expression. Pour convertir une chaîne JSON en un tableau d'objets JSON à l'aide de la fonction eval, nous lui transmettons une chaîne JSON et la fonction renvoie un objet JSON.

Exemple

Dans cet exemple, nous avons une chaîne JSON contenant des données pour différentes personnes, nous utiliserons la fonction eval() pour convertir cette chaîne JSON en un objet JSON.

<html>
<body>
   <h2>Convert JSON string to array of JSON objects using eval function</h2>
   <p>Click the following button to convert JSON string to an array of JSON objects</p><br>
   <button id="btn" onclick="convert( )" > Click Here </button> <br>
   <p id="result"></p>
   <script>
      function convert(){
         
         // Initialize the dummy JSON String
         let jsonString = '[ { "name" : "Ram", "age" : 20, "car" : "ford"},{ "name": "Shyam", "age" : "21", "car" : "tata" }, { "name" : "Mohan", "age" : 22, "car" : "toyota" } ]'
         
         // Conver the JSON String to JSON object
         let jsonObject = eval(jsonString);
         
         // Get the paragraph element
         let p = document.getElementById("result")
         
         /// Print the Object
         p.innerText += JSON.stringify(jsonObject);
         
         // Print the Object on Console
         console.log(jsonObject)
      }
   </script>
</body>
</html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:tutorialspoint.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal