Форматер JSON

Що таке форматування JSON?

Форматування JSON — це процес перетворення даних JSON у послідовне, легкочитне для людини представлення шляхом додавання відступів, пробілів і переносів рядків, без зміни структури чи вмісту. Коректне форматування полегшує огляд, налагодження, поширення та редагування JSON із збереженням сумісності з машинами та програмним забезпеченням.

JSON за визначенням ігнорує пробіли поза рядковими значеннями. Однак погано відформатований (або мінімізований) JSON — без відступів або злитий в один рядок — практично неможливо людині надійно читати або редагувати.

Форматування проти мінімізації JSON

• Форматування додає пробіли, відступи та перенос рядків для ясності та зручності читання.
• Мінімізація видаляє всі непотрібні пробіли для максимальної компактності та ефективності зберігання чи передачі.
• Потужний форматер JSON дозволяє легко переключатися між цими режимами, що полегшує вибір між зручним для людини та оптимізованим для машини варіантом.

Приклад: Мінімізований vs відформатований JSON

{"id":"3f4b2c","user":{"name":"Dana","is_active":true},"roles":["admin","editor"],"count":7}

{
  "id": "3f4b2c",
  "user": {
    "name": "Dana",
    "is_active": true
  },
  "roles": [
    "admin",
    "editor"
  ],
  "count": 7
}

Навіщо форматувати JSON?

• Читабельність: Коректні відступи та перенос рядків полегшують перевірку вкладених об'єктів, виявлення помилок і швидке розуміння складних структур даних.
• Налагодження: Виявлення неприпустимих чи несподіваних даних значно простіше, коли можна візуально переглянути ключі, значення і рівні вкладеності.
• Співпраця: Правильно відформатований JSON легше переглядати, обговорювати та редагувати під час код-рев'ю, у документації або спільних файлах.
• Контроль версій: Git та інші VCS інструменти створюють більш осмислені зміни (diff) з відформатованим JSON, спрощуючи відстеження змін з часом.
• Відповідність стандартам: Багато стилістичних гідів та автоматичних лінтерів (як-от Prettier, ESLint чи jq) вимагають узгодженого форматування для ясності та стандартизації.
• Сумісність із інструментами: Деякі API, CLI та редактори очікують відформатовані дані для зручнішої взаємодії людини або логування.

Як працює форматер JSON?

1. Парсинг: Спочатку форматер намагається розпарсити ваш вхідний текст за допомогою строгого JSON парсера. Цей крок перевіряє синтаксис: виявляє пропущені лапки, зайві коми або неекрановані символи.
2. Красивий друк: Після підтвердження валідності дані серіалізуються назад в рядок з користувацькими відступами (зазвичай 2 або 4 пробіли) та переносами рядків, створюючи «гарний» варіант JSON.

Якщо вхідний текст не є валідним JSON, форматер виведе помилку або корисне повідомлення, вказуючи місце та характер проблеми.

Параметри форматування

• Відступи: Встановіть кількість пробілів на рівень (до 8).
• Сортувати ключі об'єктів за алфавітом
• Використовувати табуляції для відступів замість пробілів
• Екранувати не ASCII символи у форматі Unicode
• Мінімізувати вивід (в один рядок, без пробілів)

Поширені проблеми, які вирішує форматування

• Однорядковий/мінімізований JSON: Дані, отримані з API або журналів, часто мінімізовані для економії трафіку, що ускладнює їх ручне редагування. Форматування відновлює читабельність для перегляду і редагування.
• Непослідовні відступи: JSON із різних джерел може містити мікс табуляцій, пробілів або відступів різної глибини. Переформатування нормалізує ці розбіжності, підвищуючи ясність і послідовність.
• Великі/вкладені структури: Глибоко вкладені масиви або об'єкти (наприклад, файли конфігурацій або складні відповіді API) стають зручними для навігації після форматування, з можливістю згортання в підтримуваних редакторах.

Реальний приклад: Форматування відповідей API

При інтеграції з сторонніми API (наприклад, AWS, Stripe або Google Cloud) відповіді часто бувають стиснутими для швидкості. Форматування JSON полегшує перевірку відсутніх полів, налагодження несподіваних значень або обмін з колегами.

{"amount":2500,"currency":"usd","status":"succeeded","charges":[{"id":"ch_1Gq","amount":2500}]}

{
  "amount": 2500,
  "currency": "usd",
  "status": "succeeded",
  "charges": [
    {
      "id": "ch_1Gq",
      "amount": 2500
    }
  ]
}

Як форматувати JSON за допомогою цього інструменту

1. Вставте або завантажте сирий, мінімізований або погано відформатований JSON у поле введення.
2. Виберіть параметри форматування (розмір відступів, сортування ключів тощо).
3. Натисніть «Форматувати» для обробки вхідних даних.
4. Перегляньте або скопіюйте чистий, зручний для читання результат. Якщо знайдені помилки, з’являться детальні повідомлення про синтаксис для допомоги в виправленні JSON.

Усе форматування виконується безпечно у вашому браузері — ваші дані ніколи не покидають ваш пристрій.

Приклади коду для форматування JSON

Дізнайтеся, як форматувати JSON у різних мовах програмування. Ці приклади демонструють основні методи форматування JSON для ефективної роботи з даними.

const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);

import json
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = json.dumps(json.loads(ugly), indent=2)
print(pretty)

package main
import (
  "encoding/json"
  "fmt"
)
func main() {
  ugly := []byte(`{"name":"Alice","age":30,"roles":["admin","user"]}`)
  var obj interface{}
  json.Unmarshal(ugly, &obj)
  pretty, _ := json.MarshalIndent(obj, "", "  ")
  fmt.Println(string(pretty))
}

import com.fasterxml.jackson.databind.ObjectMapper;
public class Main {
  public static void main(String[] args) throws Exception {
    String ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}";
    ObjectMapper mapper = new ObjectMapper();
    Object obj = mapper.readValue(ugly, Object.class);
    String pretty = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(obj);
    System.out.println(pretty);
  }
}

using System;
using Newtonsoft.Json;
class Program {
  static void Main() {
    var ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}";
    var parsed = JsonConvert.DeserializeObject(ugly);
    var pretty = JsonConvert.SerializeObject(parsed, Formatting.Indented);
    Console.WriteLine(pretty);
  }
}

<?php
$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
$obj = json_decode($ugly);
echo json_encode($obj, JSON_PRETTY_PRINT);

require 'json'
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = JSON.pretty_generate(JSON.parse(ugly))
puts pretty

echo '{"name":"Alice","age":30,"roles":["admin","user"]}' | jq .

fn main() {
  let ugly = r#"{"name":"Alice","age":30,"roles":["admin","user"]}"#;
  let value: serde_json::Value = serde_json::from_str(ugly).unwrap();
  let pretty = serde_json::to_string_pretty(&value).unwrap();
  println!("{}", pretty);
}

import com.fasterxml.jackson.databind.ObjectMapper
fun main() {
  val ugly = "{"name":"Alice","age":30,"roles":["admin","user"]}"
  val mapper = ObjectMapper()
  val obj = mapper.readValue(ugly, Any::class.java)
  val pretty = mapper.writerWithDefaultPrettyPrinter().writeValueAsString(obj)
  println(pretty)
}

import Foundation
let ugly = "{\"name\":\"Alice\",\"age\":30,\"roles\":[\"admin\",\"user\"]}"
if let data = ugly.data(using: .utf8),
   let obj = try? JSONSerialization.jsonObject(with: data),
   let pretty = try? JSONSerialization.data(withJSONObject: obj, options: .prettyPrinted),
   let prettyString = String(data: pretty, encoding: .utf8) {
    print(prettyString)
}

const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);

SELECT jsonb_pretty('{"name":"Alice","age":30,"roles":["admin","user"]}'::jsonb);

SELECT JSON_PRETTY('{"name":"Alice","age":30,"roles":["admin","user"]}');

$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
$obj = $ugly | ConvertFrom-Json
$pretty = $obj | ConvertTo-Json -Depth 10
Write-Output $pretty

use JSON;
my $ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
my $obj = decode_json($ugly);
print to_json($obj, { pretty => 1 });

import 'dart:convert';
void main() {
  const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
  final obj = jsonDecode(ugly);
  final pretty = JsonEncoder.withIndent('  ').convert(obj);
  print(pretty);
}

ugly = ~s({"name":"Alice","age":30,"roles":["admin","user"]})
{:ok, obj} = Jason.decode(ugly)
pretty = Jason.encode!(obj, pretty: true)
IO.puts(pretty)

import play.api.libs.json._
object Main extends App {
  val ugly = """{"name":"Alice","age":30,"roles":["admin","user"]}"""
  val jsValue = Json.parse(ugly)
  val pretty = Json.prettyPrint(jsValue)
  println(pretty)
}