Приклад JSON Stringify - Як проаналізувати об’єкт JSON за допомогою JS

Існує так багато мов програмування, і кожна мова має свої особливості. Але всіх їх об’єднує одне: вони обробляють дані. Всі вони працюють над даними - від простого калькулятора до суперкомп’ютерів.

Подібно до людей: у кожній спільноті стільки країн, стільки культур і стільки знань.

Але для спілкування з іншими громадами людям потрібне спільне середовище. Мова - це для людей те, що JSON - для програмування, загального середовища передачі даних.

Що таке JSON?

JSON позначає J AVA S cript O ▪ Таблиця N otation. Отже, перед тим, як зрозуміти JSON, давайте зрозуміємо об’єкти в JavaScript.

Кожна мова програмування має певний спосіб зберігання подібних даних разом. Наприклад, на С їх називають структурами.

У JavaScript об'єкти - це сукупність пар ключ-значення, де значеннями можуть бути будь-яка змінна (число, рядок, логічне значення), інший об'єкт або навіть функція. Об'єкти дуже корисні в об'єктно-орієнтованому програмуванні.

Об'єктно-орієнтоване програмування - це парадигма програмування, заснована на понятті "об'єкти", яка може містити дані у вигляді полів та код у вигляді процедур.

Давайте розглянемо приклад.

У JavaScript об'єкти визначаються за допомогою фігурних дужок, наприклад:

var obj = {};

Ось objпорожній об'єкт. Ви також можете створювати об'єкти за допомогою конструкторів, наприклад:

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

Це дало б результат Abhishek 123 18.

Ось як ви створюєте об’єкти в JavaScript. Але ці об'єкти все ще є змінними, які є специфічними лише для JavaScript.

Якщо ви хочете експортувати ці об’єкти і, наприклад, надіслати їх на сервер, вам потрібен метод їх кодування. Подивимось, як це робиться.

JSON Stringify

Для того, щоб передавати дані з одного пристрою на інший і однієї мови на інший, нам потрібна структурована, однакова і чітко визначена конвенція.

Хоча JSON базується на об'єктах JS, певні умови повинні бути дійсними. На щастя, вам не потрібно турбуватися про ці умови - адже в JavaScript у нас є метод, який називається JSON.stringify().

Цей метод використовується для перетворення об'єкта JS у закодований рядок, який можна передавати куди завгодно без втрати даних.

Може здатися чарівним, що будь-який об’єкт можна закодувати у рядок і відправити куди завгодно. Давайте розберемося в ньому більш поглиблено на деяких прикладах.

Це прототип методу stringify:

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

Перший параметр - valueце той об’єкт, який ви хочете піддавати строковій обробці. Другий і третій параметри є необов’язковими і можуть бути використані, якщо ви хочете налаштувати спосіб кодування (наприклад, роздільник та відступ).

Спробуємо розширити наш наведений вище приклад.

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

Це дасть результат {"name":"Abhishek","roll_number":"123","age":18}.

Якщо ми використовуємо необов’язкові параметри, тобто замінюємо JSON.stringify(student1)на JSON.stringify(student1, null, 2), ми отримаємо щось подібне:

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

Ви можете використовувати їх для друку JSON у зручному для читання форматі. Тепер спробуємо ще один приклад.

Тут ми будемо використовувати об'єктні методи. Об'єктні методи - це функції всередині об'єкта, які можна викликати з цим об'єктом, використовуючи методи у наведеному вище прикладі:

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

Це дасть такий самий результат, як і перший приклад, тобто Abhishek 123 18.

Об’єктні методи можна використовувати для виконання функцій, пов’язаних з об’єктом, та використання властивостей об’єкта. Спробуємо розтягнути цей об’єкт.

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

Він по - , як і раніше дасть вам той же результат, {"name":"Abhishek","roll_number":"123","age":18}.

Таким чином, об’єктні методи ігноруються функцією stringify. Якщо ви хочете, щоб вони також передавалися, вам потрібно спочатку перетворити їх у рядок.

Наприклад, ви можете зателефонувати, student1.print = student1.print.toString()а потім stringify. Тоді ви отримаєте щось подібне:

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

Давайте розглянемо ще один об’єкт:

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

Це призведе до помилки в вимові Uncaught TypeError: Converting circular structure to JSON.

Це відбувається тому, що key2 посилається назад на obj. Такі об'єкти відомі як кругові об'єкти, і вони не можуть бути перетворені в рядок JSON.

Тут другий параметр стане в нагоді. Хоча я не буду демонструвати, як це працює тут, рішення ви можете знайти на цій сторінці MDN.

Ось як ви кодуєте JSON. Тепер давайте подивимося, як проаналізувати рядок JSON.

Розбір JSON

Так само, як JavaScript має функцію для роздрібнення JSON, ми також маємо функцію для синтаксичного аналізу цього розширеного JSON. Це прототип функції:

JSON.parse(text[, reviver])

Тут першим параметром є рядок JSON, який потрібно проаналізувати. Другий параметр необов’язковий і може бути функцією для модифікації проаналізованого JSON перед поверненням. Продемонструємо цей метод на прикладі.

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

І результат буде Abhishek 123 18, тому рядок JSON було успішно проаналізовано.

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 є кращим за XML з багатьох причин, але це не означає, що нам слід відмовитися від XML. Тим не менш, JSON стане найкращою формою передачі даних у майбутньому.

JWT - майбутнє JSON

Веб-маркер JSON (JWT) - це відкритий стандарт, який визначає компактний та автономний спосіб безпечної передачі інформації між сторонами як об'єкт JSON.

Цю інформацію можна перевірити та довіряти їй, оскільки вона має цифровий підпис. JWT можна підписати, використовуючи секрет (з алгоритмом HMAC) або пару відкритих / приватних ключів, використовуючи RSA або ECDSA.

Ці маркери можна використовувати для підписання даних JSON та підтвердження ідентичності відправника. Оскільки дані підписані, якщо будь-які дані були підроблені, ви це знаєте одразу.

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.