Как работать с JSON в веб-разработке?

JSON может убить ваш сайт на часы, а может, и больше. Хотите узнать, как этого избежать? Тогда читайте дальше: разберем самые частые ошибки и расскажем, как правильно управлять данными.

Что такое JSON

JSON или JavaScript Object Notation — формат для обмена данными. Его используют в веб-разработке, чтобы передать числовую информацию от клиента к серверу и наоборот. По сути это просто строка, но с нюансами.

JSON — стандарт в веб-разработке, так как его текстовая структура легко читается как человеком, так и компьютером. Давайте посмотрим, из чего он может состоять:

• Объекты — пары “ключ-значение” в фигурных скобках. Выглядят так же, как обычные JS-объекты;
• Массивы — упорядоченные значения. Заключаются в квадратные скобки и отделяются запятой;
• Ключи — строки, которые обязательно в двойных кавычках. Одинарные не подойдут;
• Значения — могут быть строками в двойных кавычках, числами, логическими значениями, массивами, объектами или null.

Мы не зря упоминаем двойные кавычки. Очень важно следить за ними, иначе сервер или ваш сайт не смогут обработать JSON.

Пример JSON-документа:

			{
  "name": "JSON - убийца сайтов.",
  "type": "article",
  "topics": ["Программирование", "Технологии", "Веб-разработка"],
  "published": true
}
		

В этом примере объект содержит четыре ключа:

• name — строка,
• type — строка,
• topics — массив строк,
• published — логическое значение, true.

Этот JSON описывает воображаемую статью, у которой есть темы, название и статус публикации.

Зачем нужен JSON, если есть XML?

До JSON разработчики использовали XML. Вот основные отличия:

Давайте разберём все пункты и посмотрим, в чём же конкретно хорош JSON.

Синтаксис

JSON

Выглядит как обычный JavaScript-объект.

Пример:

			{
  "name": "John",
  "age": 30
}
		

Мы создали объект с двумя ключами. Имя –– John, возраст –– 30. Это упрощённый вариант хранения данных о пользователе. Также можно добавить почту, ник, город и так далее.

XML

XML или (Extensible Markup Language) –– посложнее, так как использует закрывающиеся теги. Это делает его визуально более «шумным» и трудным для восприятия. Особенно если XML-данных много.

Размер данных

JSON

JSON компактнее, в нём нет лишних тегов и атрибутов. Он лучше подходит для веба, так как важна минимизация. Чем данные легче, тем быстрее работает сайт.

XML

XML объемнее, потому что каждый элемент должен быть обёрнут в открывающий, а потом закрывающий тег.

Легкость парсинга

JSON

JSON легко парсить. В JavaScript достаточно использовать JSON.parse(), чтобы преобразовать JSON-строку в JS-объект.

Пример:

			let data = '{"title":"JSON","level": "easy"';
let obj = JSON.parse(data);
console.log(obj.title); // "JSON"
		

Здесь мы поместили JSON-строку в переменную и затем распарсили её в другую переменную с помощью функции JSON.parse().

XML

XML-файлы могут быть большими, с множеством вложенных тегов: чтобы распарсить такие данные, нужно много времени и ресурсов.

Пример на JavaScript:

			let parser = new DOMParser();
let xmlString = 'JSONeasy';
let xmlDoc = parser.parseFromString(xmlString, "application/xml");
let name = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
console.log(name); // "John"
		

Что здесь происходит:

1. Создаем строку, которую хотим превратить в XML. Она содержит элемент с вложенными элементами;
2. Используем объект DOMParser. Он превращает текстовые строки в XML-документы;
3. Метод parseFromString() выполняет это преобразование. После этого js работает с переменной через DOM-методы;
4. Используем метод getElementsByTagName(), чтобы получить значение элемента . Он возвращает массив элементов с указанным тегом;
5. Указываем индекс [0] для выбора первого элемента, а затем получаем его текстовое содержимое через childNodes[0].nodeValue.

Разница очевидна:

• Для JSON мы можем сразу преобразовать строку в объект с помощью JSON.parse();
• Для XML требуется больше шагов: разбор строки в документ и использование методов DOM для извлечения данных. 

Читаемость

JSON

JSON легко читать, потому что его структура похожа на JavaScript-объект. Он не требует лишних символов и тегов, поэтому визуально лаконичен и прост.

XML

XML выглядит сложнее. Теги для описания структуры делают документ более громоздким и менее читаемым. Особенно если в файле много вложенных элементов.

Создаём и парсим JSON

JSON-документы можно создать вручную. Главное, надо соблюдать синтаксические правила:

• Использовать двойные кавычки для строк;
• Разделять ключи и значения двоеточием, как и в JS-объектах;
• Ставить запятые между ключами.

А можно использовать конвертер. Вы ему JS-объект, а он из него –– JSON.

В разных языках –– разные инструменты для работы с JSON. Разработчики используют встроенные средства языков программирования или сторонние библиотеки:

• JavaScript: Методы JSON.stringify() и JSON.parse();
• Python: Модуль json для сериализации и десериализации;
• PHP: Функции json_encode() и json_decode();
• Node.js: Встроенные методы для работы с JSON в модуле fs.

Работа с JSON в Python

			import json

data = {
    "name": "Tproger",
    "language": "Python"
}

# Сериализация
json_data = json.dumps(data)

# Десериализация
parsed_data = json.loads(json_data)
print(parsed_data)
		

Что тут происходит:

1. Импортируем json. Это встроенная библиотека Python. Она работает с данными в формате JSON;
2. Создаём данные для сериализации –– Python-словарь data, который содержит пары ключ-значение. Не пугайтесь нового слова «сериализация». Это всё то же преобразование одного формата в другой;
3. Используем метод json.dumps() для преобразования Python-объекта в строку в формате JSON. Результатом будет строка, которую можно передать серверу, сохранить в файл или обработать в другой программе;
4. Десериализириуем данные  с помощью метода json.loads(). Он преобразует JSON-строку обратно в Python-объект;
5. Выводим десериализованные данные в консоль. В данном случае это словарь parsed_data, который будет точно таким же, как и исходный словарь data.

Работа с JavaScript

Методы JSON.stringify() и JSON.parse() позволяют преобразовывать данные из объекта в JSON-строку и обратно.

Пример:

			const data = { title: "Tproger", published: true };

// Преобразование в JSON
const jsonString = JSON.stringify(data);

// Парсинг JSON обратно в объект
const parsedData = JSON.parse(jsonString);
console.log(parsedData);
		

Метод fetch() используется для отправки HTTP-запросов с JSON-данными:

			fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: "Tproger" })
})
.then(response => response.json())
.then(data => console.log(data));
		

Что здесь происходит:

• Мы указываем, куда нужно сделать запрос и что нужно передать серверу. Посылка –– это значение в ключе body. Если не обернуть объект с данными в JSON.stringify(), то запрос упадёт. Так как этот метод превращает JS-объект в JSON-строку. Сервер умеет читать JSON, но не умеет работать с JS-объектами;
• На предпоследней строке мы получаем ответ от сервера. А затем обязательно переводим его обратно, в удобоваримый для JS код.

Работа с JSON на сервере

JSON незаменим в бэкэнде. Сервер присылает данные через REST API в JSON. Поэтому в предыдущем блоке мы использовали на ответе метод .json(). Без него данные останутся обычной JSON-строкой.

Разберём примеры на разных языках.

Пример реализации REST API на Node.js

			const express = require('express');
const app = express();

app.use(express.json());

app.post('/data', (req, res) => {
  console.log(req.body);
  res.json({ message: "Данные получены" });
});

app.listen(3000, () => console.log('Сервер работает'));
		

Здесь мы создаём приложение на основе Express. Оно слушает POST-запросы на маршруте /data и возвращает ответ в формате JSON с сообщением о том, что данные получены.

Для работы с JSON на сервере используем встроенную функцию express.json(), которая парсит данные, и метод res.json(), чтобы отправить ответ в формате JSON.

Пример работы JSON в python-фреймворке Flask

			from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/data', methods=['POST'])
def handle_data():
    try:
        data = request.get_json()
        if data is None:
            return jsonify({"error": "Invalid JSON"}), 400
        return jsonify({"received": data})
    except Exception as e:
        return jsonify({"error": str(e)}), 400

if __name__ == '__main__':
    app.run()
		

Что делаем:

1. Импортируем необходимые библиотеки: Flask, request, jsonify для создания нашего веб-приложения и обработки JSON-строк;
2. Создаем приложение через экземпляр Flask;
3. Определяем маршрут  /data и указываем, что функция handle_data() будет обрабатывать по этому маршруту POST-запросы;
4. Извлекаем JSON-данные из запроса внутри функции. Получаем и преобразуем данные из тела запроса в JSON с помощью request.get_json();
5. Отправляем JSON-ответ. Возвращаем клиенту JSON-ответ, содержащий полученные данные. Либо, если переменная data пуста, отправляем ошибку и 400 статус. И обязательно отлавливаем ошибки с помощью try-except;
6. Запускаем приложение. Приложение запускается на сервере и слушает входящие запросы.

Что не так с JSON

За простотой JSON скрываются ловушки, попадать в которые лучше не надо. Малейшая ошибка — и данные становятся нечитаемыми, а приложение падает. Разберём эти ловушки:

Неправильная структура

Забудете закрыть скобку, добавите не ту кавычку или поставите запятую в конце массива — и всё. Браузер или сервер выдадут ошибку. А если JSON создается динамически, найти проблему будет сложно.

Пример ошибки:

			{
  "name": "JSON - убийца сайтов",
  "type": "article",
  "topics": ["Программирование", "Технологии", "Веб-разработка",]
}
		

В этом примере после крайнего элемента массива стоит лишняя запятая. Исправленный вариант:

			{
  "name": "JSON - убийца сайтов",
  "type": "article",
  "topics": ["Программирование", "Технологии", "Веб-разработка"]
}
		

Большие объемы данных

JSON не предназначен для хранения огромных массивов данных. Обрабатывать большие файлы в браузере –– опасно для производительности. Ваш сайт может начать тормозить или вовсе зависнуть.

Неэкранированные символы

Забыли экранировать кавычку в строке? Получите ошибку. JSON требует строго соблюдать правила синтаксиса, иначе парсинг провалится.

Пример ошибки:

Здесь у нас дублирование. Нельзя помещать двойные кавычки внутрь таких же двойных кавычек:

			{
  "quote": "Илон Маск сказал: "JSON должен быть правильным"."
}
		

Исправленный вариант:

			{
  "quote": "Илон Маск сказал: \"JSON должен быть правильным\"."
}
		

Уязвимая безопасность

Если данные не проверяются, JSON может стать источником XSS-атак или привести к раскрытию конфиденциальной информации.

Пример ошибки:

Пользователь может отправить через поле ввода вредоносные данные. И получится вот такая история:

			{
  "name": "alert('Взлом!');"
}
		

Решение: обязательно проверяйте входящие данные. Можно заменить опасные символы безопасными:

			const safeName = name.replace(//g, ">");
		

И уже эту строку отправить на сервер.

Как избежать проблем с JSON?

Чтобы работать с JSON безопасно и эффективно:

• Используйте валидаторы. Перед передачей данных обязательно проверяйте JSON на синтаксические ошибки;
• Сжимайте данные. Уменьшайте размер JSON, удаляя лишние пробелы и символы, чтобы оптимизировать передачу и обработку;
• Не доверяйте входящим данным. Проверяйте и фильтруйте всё, что приходит от клиента или сторонних API;
• Ограничивайте глубину вложенности. Глубокая структура JSON может перегрузить обработчик и вызвать зависание.

Валидаторы JSON

Перед отправкой проверьте свой JSON. Для этого можно использовать онлайн-валидаторы. Например, https://jsonlint.com. Как он работает: вы прописываете вашу строку, а валидатор проверяет, нет ли в ней ошибок.

Минификация JSON

Для уменьшения размера JSON-строку можно минифицировать. Удалить пробелы и переносы строк. Пример минификации в Python:

			import json

json_data = {"name": "Tproger", "active": true}
minified_json = json.dumps(json_data, separators=(",", ":"))
print(minified_json)
		

Обработка ошибок при работе с JSON

Ошибки часто возникают из-за неправильного формата данных. Всех опасных мест не избежать. Но можно подстелить соломку.

Вот так обрабатываются возможные ошибки с JSON:

			try {
  const keyData = localStorage.getItem('key');

  // Если данные отсутствуют, выбрасываем исключение
  if (!keyData) {
    throw new Error("По этому ключу нет данных в localStorage");
  }

  // Парсинг данных
  const data = JSON.parse(keyData);
  console.log("Данные успешно получены:", data);
} catch (error) {
  console.error("Ошибка при получении или парсинге JSON из localStorage:", error.message);
}
		

Что тут происходит:

1. Получаем данные из localStorage: Используется метод localStorage.getItem(), чтобы извлечь данные по указанному ключу key;
2. Проверяем на наличие данных: Если данные отсутствуют –– null, выбрасывается ошибка с помощью throw;
3. Парсим данные: Если данные есть, они парсятся через JSON.parse(). И на выходе получается JS-объект;
4. Обрабатываем ошибки: В блоке catch ловятся все ошибки. Затем их можно обработать и отобразить пользователю в интерфейсе.

Теперь даже если в LocalStorage не лежат нужные данные, приложение не упадёт.

В веб разработке без JSON никуда. Он лёгкий и гибкий. Но чтобы использовать эти преимущества, нужно научиться с ним взаимодействовать.

Для этого просто следуйте нашим правилам. Проверяйте свои JSON-строки, обрабатывайте ошибки и тестируйте приложение на корнер-кейсы. Тогда ваши сайты и приложения будут в безопасности. 🙂