JSON Stringify-Beispiel - Analysieren eines JSON-Objekts mit JS

Es gibt so viele Programmiersprachen und jede Sprache hat ihre eigenen Funktionen. Eines haben alle gemeinsam: Sie verarbeiten Daten. Von einem einfachen Taschenrechner bis hin zu Supercomputern arbeiten alle mit Daten.

Beim Menschen ist es genauso: Es gibt so viele Länder, so viele Kulturen und so viel Wissen in jeder Gemeinschaft.

Aber um mit anderen Gemeinschaften zu kommunizieren, brauchen die Menschen ein gemeinsames Medium. Sprache ist für den Menschen das, was JSON für die Programmierung ist, ein gängiges Medium für die Datenübertragung.

Was ist JSON?

JSON steht für J ava S cript O bject N otation. Bevor wir JSON verstehen, wollen wir Objekte in JavaScript verstehen.

Jede Programmiersprache verfügt über eine Methode zum gemeinsamen Speichern ähnlicher Daten. In C werden sie beispielsweise Strukturen genannt.

In JavaScript sind Objekte eine Sammlung von Schlüssel-Wert-Paaren, wobei Werte eine beliebige Variable (Zahl, Zeichenfolge, Boolescher Wert), ein anderes Objekt oder sogar eine Funktion sein können. Objekte sind sehr nützlich bei der objektorientierten Programmierung.

Objektorientierte Programmierung ist ein Programmierparadigma, das auf dem Konzept der "Objekte" basiert und Daten in Form von Feldern und Code in Form von Prozeduren enthalten kann.

Schauen wir uns ein Beispiel an.

In JavaScript werden Objekte mit geschweiften Klammern definiert, zum Beispiel:

var obj = {};

Hier objist ein leeres Objekt. Sie können Objekte auch mit Konstruktoren erstellen, zum Beispiel:

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);

Dies würde die Ausgabe geben Abhishek 123 18.

So erstellen Sie Objekte in JavaScript. Diese Objekte sind jedoch immer noch Variablen, die nur für JavaScript spezifisch sind.

Wenn Sie diese Objekte exportieren und beispielsweise an einen Server senden möchten, benötigen Sie eine Methode zum Codieren. Mal sehen, wie es geht.

JSON Stringify

Um Daten von einem Gerät zu einem anderen und von einer Sprache zu einer anderen zu übertragen, benötigen wir eine strukturierte, einheitliche und klar definierte Konvention.

Obwohl JSON auf JS-Objekten basiert, müssen bestimmte Bedingungen gültig sein. Glücklicherweise müssen Sie sich über diese Bedingungen keine Sorgen machen - denn in JavaScript haben wir eine Methode namens JSON.stringify().

Diese Methode wird verwendet, um ein JS-Objekt in eine codierte Zeichenfolge zu konvertieren, die überall übertragen werden kann, ohne dass Daten verloren gehen.

Es mag magisch erscheinen, dass jedes Objekt in eine Zeichenfolge codiert und überall hin gesendet werden kann. Lassen Sie es uns anhand einiger Beispiele genauer verstehen.

Dies ist der Prototyp der Stringify-Methode:

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

Der erste Parameter ist valuedas Objekt, das Sie stringifizieren möchten. Der zweite und dritte Parameter sind optional und können verwendet werden, wenn Sie die Codierung anpassen möchten (z. B. Trennzeichen und Einrückung).

Versuchen wir, unser obiges Beispiel zu fassen.

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);

Dies gibt die Ausgabe {"name":"Abhishek","roll_number":"123","age":18}.

Wenn wir die optionalen Parameter verwenden, ist , dass wir ersetzen JSON.stringify(student1)mit JSON.stringify(student1, null, 2), werden wir so etwas wie dieses:

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

Sie können diese verwenden, um JSON in einem lesbaren Format zu drucken. Versuchen wir jetzt noch ein Beispiel.

Hier werden wir Objektmethoden verwenden. Objektmethoden sind Funktionen innerhalb eines Objekts, die mit diesem Objekt mithilfe der Methoden in unserem obigen Beispiel aufgerufen werden können:

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();

Dies ergibt die gleiche Ausgabe wie im ersten Beispiel, d Abhishek 123 18. H.

Objektmethoden können verwendet werden, um einem Objekt zugeordnete Funktionen auszuführen und die Eigenschaften des Objekts zu verwenden. Versuchen wir, dieses Objekt zu stringifizieren.

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);

Es gibt Ihnen immer noch die gleiche Ausgabe {"name":"Abhishek","roll_number":"123","age":18}.

Daher werden die Objektmethoden von der Stringify-Funktion ignoriert. Wenn Sie möchten, dass sie auch übertragen werden, müssen Sie sie zuerst in eine Zeichenfolge konvertieren.

Zum Beispiel könnten Sie aufrufen student1.print = student1.print.toString()und dann stringifizieren. Dann würden Sie so etwas bekommen:

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

Betrachten wir ein anderes Objekt:

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

Dies wird einen Fehler auslösen Uncaught TypeError: Converting circular structure to JSON.

Dies geschieht, weil key2 auf obj verweist. Solche Objekte werden als kreisförmige Objekte bezeichnet und können nicht in eine JSON-Zeichenfolge konvertiert werden.

Hier bietet sich der zweite Parameter an. Obwohl ich hier nicht demonstrieren werde, wie es funktioniert, finden Sie die Lösung auf dieser MDN-Seite.

So codieren Sie JSON. Nun wollen wir sehen, wie eine JSON-Zeichenfolge analysiert wird.

JSON-Analyse

Wie JavaScript eine Funktion zum Stringifizieren von JSON hat, haben wir auch eine Funktion zum Parsen dieses stringifizierten JSON. Dies ist der Funktionsprototyp:

JSON.parse(text[, reviver])

Hier ist der erste Parameter die JSON-Zeichenfolge, die analysiert werden muss. Der zweite Parameter ist optional und kann eine Funktion zum Ändern des analysierten JSON vor der Rückkehr sein. Lassen Sie uns diese Methode anhand eines Beispiels demonstrieren.

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);

Und die Ausgabe wird sein Abhishek 123 18, also wurde die JSON-Zeichenfolge erfolgreich analysiert.

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 ist aus vielen Gründen besser als XML, aber das bedeutet nicht, dass wir XML aufgeben sollten. Dennoch wird JSON in Zukunft die bevorzugte Form der Datenübertragung sein.

JWT - Die Zukunft von JSON

JSON Web Token (JWT) ist ein offener Standard, der eine kompakte und in sich geschlossene Methode für die sichere Übertragung von Informationen zwischen Parteien als JSON-Objekt definiert.

Diese Informationen können überprüft und als vertrauenswürdig eingestuft werden, da sie digital signiert sind. JWTs können mit einem geheimen (mit dem HMAC-Algorithmus) oder einem öffentlichen / privaten Schlüsselpaar mit RSA oder ECDSA signiert werden.

Mit diesen Token können JSON-Daten signiert und die Identität des Absenders überprüft werden. Da die Daten signiert sind, wissen Sie sofort, ob Daten manipuliert wurden.

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.