Exemple JSON Stringify - Comment analyser un objet JSON avec JS

Il y a tellement de langages de programmation et chaque langage a ses propres fonctionnalités. Mais tous ont un point commun: ils traitent des données. De la simple calculatrice aux supercalculateurs, ils travaillent tous sur des données.

C'est la même chose avec les humains: il y a tellement de pays, tellement de cultures et tellement de connaissances dans chaque communauté.

Mais pour communiquer avec d'autres communautés, les gens ont besoin d'un média commun. Le langage est aux humains ce que JSON est à la programmation, un moyen commun de transmission de données.

Qu'est-ce que JSON?

JSON signifie J ava S cript O bjet N ottaison. Donc, avant de comprendre JSON, comprenons les objets en JavaScript.

Chaque langage de programmation a une méthode pour stocker ensemble des données similaires. En C, par exemple, on les appelle des structures.

En JavaScript, les objets sont une collection de paires clé-valeur, où les valeurs peuvent être n'importe quelle variable (nombre, chaîne, booléen), un autre objet ou même une fonction. Les objets sont très utiles dans la programmation orientée objet.

La programmation orientée objet est un paradigme de programmation basé sur le concept d '"objets", qui peut contenir des données, sous forme de champs, et du code, sous forme de procédures.

Regardons un exemple.

En JavaScript, les objets sont définis à l'aide d'accolades, par exemple:

var obj = {};

Ici, objest un objet vide. Vous pouvez également créer des objets à l'aide de constructeurs, par exemple:

function Student(name, roll_number, age) { this.name = name; this.roll_number = roll_number; this.age = age; } var student1 = new Student("Abhishek", "123", 18); console.log(student1.name, student1.roll_number, student1.age);

Cela donnerait la sortie Abhishek 123 18.

C'est ainsi que vous créez des objets en JavaScript. Mais ces objets sont toujours des variables spécifiques uniquement à JavaScript.

Si vous souhaitez exporter ces objets, et par exemple les envoyer vers un serveur, vous avez besoin d'une méthode pour les encoder. Voyons comment c'est fait.

JSON Stringify

Pour transmettre des données d'un appareil à un autre et d'une langue à une autre, nous avons besoin d'une convention structurée, uniforme et bien définie.

Bien que JSON soit basé sur des objets JS, certaines conditions doivent être valides. Heureusement, vous n'avez pas à vous inquiéter de ces conditions - car en JavaScript, nous avons une méthode appelée JSON.stringify().

Cette méthode est utilisée pour convertir un objet JS en une chaîne codée qui peut être transmise n'importe où sans perdre de données.

Il peut sembler magique que n'importe quel objet puisse être encodé dans une chaîne et envoyé n'importe où. Comprenons-le plus en profondeur à travers quelques exemples.

Voici le prototype de la méthode stringify:

JSON.stringify(value[, replacer[, space]])

Le premier paramètre est valuequel est l'objet que vous souhaitez stringifier. Les deuxième et troisième paramètres sont facultatifs et peuvent être utilisés si vous souhaitez personnaliser la façon dont il sera encodé (par exemple, le séparateur et l'indentation).

Essayons de stringifier notre exemple ci-dessus.

function Student(name, roll_number, age) { this.name = name; this.roll_number = roll_number; this.age = age; } var student1 = new Student("Abhishek", "123", 18); var str = JSON.stringify(student1); console.log(str);

Cela donnera la sortie {"name":"Abhishek","roll_number":"123","age":18}.

Si nous utilisons les paramètres optionnels, c'est-à-dire que nous remplaçons JSON.stringify(student1)par JSON.stringify(student1, null, 2), nous obtiendrons quelque chose comme ceci:

{ "name": "Abhishek", "roll_number": "123", "age": 18 }

Vous pouvez les utiliser pour imprimer JSON dans un format lisible. Essayons maintenant un autre exemple.

Ici, nous utiliserons des méthodes objet. Les méthodes objet sont des fonctions dans un objet qui peuvent être appelées avec cet objet, en utilisant les méthodes de notre exemple ci-dessus:

function Student(name, roll_number, age) { this.name = name; this.roll_number = roll_number; this.age = age; this.print = function() { console.log(this.name, this.roll_number, this.age); } } var student1 = new Student("Abhishek", "123", 18); student1.print();

Cela donnera la même sortie que le premier exemple, c'est-à-dire Abhishek 123 18.

Les méthodes objet peuvent être utilisées pour exécuter des fonctions associées à un objet et utiliser les propriétés de l'objet. Essayons de stringifier cet objet.

function Student(name, roll_number, age) { this.name = name; this.roll_number = roll_number; this.age = age; this.print = function() { console.log(this.name, this.roll_number, this.age); } } var student1 = new Student("Abhishek", "123", 18); var str = JSON.stringify(student1); console.log(str);

Il vous donnera toujours la même sortie, {"name":"Abhishek","roll_number":"123","age":18}.

Ainsi, les méthodes objet sont ignorées par la fonction stringify. Si vous voulez qu'ils soient également transmis, vous devez d'abord les convertir en chaîne.

Par exemple, vous pouvez appeler student1.print = student1.print.toString()puis stringify. Ensuite, vous obtiendrez quelque chose comme ceci:

{"name":"Abhishek","roll_number":"123","age":18,"print":"function() {\n    console.log(this.name, this.roll_number, this.age);\n  }"}

Considérons un autre objet:

var obj = {}; obj.key1 = "value1"; obj.key2 = obj; var str = JSON.stringify(obj); console.log(obj);

Cela lancera une erreur en disant Uncaught TypeError: Converting circular structure to JSON.

Cela se produit parce que key2 fait référence à obj. Ces objets sont appelés objets circulaires et ne peuvent pas être convertis en chaîne JSON.

C'est là que le deuxième paramètre est utile. Bien que je ne montre pas comment cela fonctionne ici, vous pouvez trouver la solution sur cette page MDN.

C'est ainsi que vous encodez JSON. Voyons maintenant comment analyser une chaîne JSON.

Analyse JSON

Juste comme JavaScript a une fonction pour stringify JSON, nous avons également une fonction pour analyser ce JSON stringified. Voici le prototype de fonction:

JSON.parse(text[, reviver])

Ici, le premier paramètre est la chaîne JSON qui doit être analysée. Le deuxième paramètre est facultatif et peut être une fonction pour modifier le JSON analysé avant de le renvoyer. Démontrons cette méthode à l'aide d'un exemple.

function Student(name, roll_number, age) { this.name = name; this.roll_number = roll_number; this.age = age; } var student1 = new Student("Abhishek", "123", 18); var str = JSON.stringify(student1); var parsedJSON = JSON.parse(str); console.log(parsedJSON,name. parsedJSON.roll_number, parsedJSON.age);

Et la sortie sera Abhishek 123 18, donc la chaîne JSON a été analysée avec succès.

You could use this to send data from client to server. The data to be sent can be JSON encoded at the client and the stringified JSON will be parsed at the server and processed. This makes it really easy.

JSON can also be used to transmit data across different programs written in different languages. All languages have libraries to stringify and parse JSON.

JSON vs. XML

XML or eXtensible Markup Language is a very popular way of storing and transmitting data, similar to JSON. It existed before JSON and is still widely used today.

For example, it's used in RSS feeds, which are still the most popular way of subscribing to some publication or author. There are also XML sitemaps which are a list of all pages on a website. And search engines use them to see if there are any new pages to be crawled.

XML uses markup format – similar to HTML but much stricter.

JSON and XML have various similarities and differences, as explained in the following points:

  • Both are human-readable
  • Both have a hierarchial structure
  • Both are widely supported across various programming languages
  • Both can be fetched from the server using HTTP requests
  • JSON is shorter than XML
  • JSON can use arrays
  • JSON can be parsed using standard JavaScript functions, whereas XML needs to be parsed using the XML DOM (which is slower)

The same data can be expressed in JSON and XML as follows:

JSON:

{"employees":[ { "firstName":"Quincy", "lastName":"Larson" }, { "firstName":"Abigail", "lastName":"Rennemeyer" }, { "firstName":"Abhishek", "lastName":"Chaudhary" } ]}

XML:

  Quincy Larson   Abigail Rennemeyer   Abhishek Chaudhary  

JSON est meilleur que XML pour de nombreuses raisons, mais cela ne signifie pas que nous devrions abandonner XML. Pourtant, JSON deviendra la forme préférée de transmission de données à l'avenir.

JWT - L'avenir de JSON

JSON Web Token (JWT) est une norme ouverte qui définit un moyen compact et autonome de transmettre en toute sécurité des informations entre les parties en tant qu'objet JSON.

Ces informations peuvent être vérifiées et fiables car elles sont signées numériquement. Les JWT peuvent être signés à l'aide d'un secret (avec l'algorithme HMAC) ou d'une paire de clés publique / privée à l'aide de RSA ou ECDSA.

Ces jetons peuvent être utilisés pour signer des données JSON et vérifier l'identité de l'expéditeur. Puisque les données sont signées, si des données ont été falsifiées, vous le saurez tout de suite.

Though we won't discuss the implementation in full here, we can understand how it works. A JSON Web Token consists of three parts, the header, the payload and the signature.

The header consists of the type of token and algorithm used, the payload consists of the data, and the signature is the value you get when you sign the header and payload together.

The final token is in the form of ...

These tokens are currently used in authorization and are faster and more compact than other authorization methods. These may be very useful in the future and their potential is very high.

Conclusion

In this article, we've seen the importance of JSON as a medium of data transfer between completely different systems, and why is it so convenient.

JSON is a universal medium and is not just specific to JavaScript. JSON is already used in NoSQL databases to store data in JSON format.

We also compared JSON and XML and saw why JSON is more efficient and faster than XML. In the future, we may develop even better ways of transmitting data.

The rate at which the internet is growing, efficient data transfer will be the highest priority. And JSON serves that function really well for now.

You can try new things with JSON and implement different data structures – it's open to innovation, and we should never stop experimenting.

Hope you liked my article. I have learned a lot by writing it, and your appreciation motivates me everyday, Do visit my internet home theabbie.github.io.