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 ?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBavant: 2023-08-27 17:33:021625parcourir

如何使用 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>

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>

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!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment vérifier si deux éléments sont identiques en utilisant jQuery/JavaScript ?Article suivant：Comment vérifier si deux éléments sont identiques en utilisant jQuery/JavaScript ?

Articles Liés

Voir plus