מעצב JSON

מעצב JSON אונליין מהיר, חינמי ובטוח.

עצב את ה-JSON שלך למטה

עצב במהירות את ה-JSON שלך אונליין עם תוצאות מיידיות. נהנה מעורך מודרני ידידותי לקוד עם מספרי שורות והדגשת תחביר. כל הפעולות מהירות, פרטיות ולעולם לא יוצאות מהדפדפן.

מהו עיצוב JSON?

עיצוב JSON הוא תהליך המרה של נתוני JSON להופעה עקבית וקריאה לבני אדם על ידי הוספת הזחה, רווחים ושבירת שורות - מבלי לשנות את המבנה או התוכן. עיצוב נכון מקל על בדיקה, איתור באגים, שיתוף ועריכה, ומבטיח תאימות למכונות וכלי תוכנה.

JSON מחריג מרווחים מחוץ למחרוזות עצמן. עם זאת, JSON גרוע או מקוצר - ללא הזחה או שורה אחת בלבד - עשוי להיות קשה במיוחד לקריאה או עריכה מהימנה על ידי בני אדם.

עיצוב מול קיצור JSON

  • עיצוב מוסיף רווחים, הזחה ושבור שורות כדי לשפר בהירות וקריאות.
  • קיצור מסיר את כל הרווחים המיותרים למקסימום קומפקטיות ויעילות לאחסון או העברה.
  • מעצב JSON חזק מאפשר להחליף בין מצבים אלו, מה שמקל על המרה בין גרסאות ידידותיות לאדם לאופטימליות למכונה כנדרש.

דוגמה: JSON מקוצר לעומת JSON מעוצב

JSON מקוצר (קומפקטי):
{"id":"3f4b2c","user":{"name":"Dana","is_active":true},"roles":["admin","editor"],"count":7}
JSON מעוצב (מיופה):
{
  "id": "3f4b2c",
  "user": {
    "name": "Dana",
    "is_active": true
  },
  "roles": [
    "admin",
    "editor"
  ],
  "count": 7
}

מדוע לעצב JSON?

  • קריאות: הזחה נכונה ושבירת שורות מקלות על בדיקת אובייקטים מקוננים, איתור טעויות והבנת מבני נתונים מורכבים במהירות.
  • איתור באגים: פתרון תקלות בנתונים שגויים או בלתי צפויים פשוט יותר כשאפשר לסרוק חזותית מפתחות, ערכים ורמות קונסולידציה.
  • שיתוף פעולה: JSON מעוצב היטב נוח יותר לסקירה, דיון ועריכה בביקורות קוד, תיעוד או קבצים משותפים.
  • בקרת גרסאות: Git וכלים נוספים מייצרים הבדלים משמעותיים וברורים יותר עם JSON מעוצב, ומאפשרים מעקב קל יותר אחרי שינויים לאורך זמן.
  • תאימות לתקנים: מדריכי סגנון רבים וכלי ניתוח אוטומטיים (כגון Prettier, ESLint או jq) דורשים עיצוב עקבי לשם בהירות וסטנדרטיזציה.
  • תאימות כלים: API, ממשקי שורת פקודה ועורכים רבים מצפים לקלט מעוצב להנגשת עבודה אנושית או רישום יעיל.

כיצד פועל מעצב JSON?

  1. פירסינג: המעצב מנסה תחילה לנתח את הטקסט שהזנת באמצעות מפענח JSON קפדני – שלב הבודק תקינות תחבירית של ציטוטים חסרים, פסיקים מיותרים או תווים לא חוקיים.
  2. ייפוי: לאחר אישור תקינות, הנתונים מתורגמים חזרה למחרוזת עם ההזחה המוגדרת (בד”כ 2 או 4 מרווחים) ושבירת שורות, ליצירת גרסת "מיופית".

אם הקלט אינו JSON תקין, המעצב יציג שגיאה או הודעה מפורטת המצביעה על מיקום הבעיה וסוגה.

אפשרויות עיצוב

  • הזחה: הגדר את מספר הרווחים לכל רמה (עד 8).
  • מיין מפתחות אובייקטים לפי סדר אלפביתי
  • השתמש בטאבים להזחה במקום רווחים
  • המר תווים לא-ASCII לקידוד Unicode
  • קיצור פלט (שורה אחת, ללא רווחים)

בעיות נפוצות שנפתרות עם עיצוב

  • JSON מקוצר/בשורה אחת: נתונים שמתקבלים מ-API או קבצי לוג לרוב מקוצרי מרווחים לחיסכון ברוחב פס, מה שהופך עריכה ידנית למאתגרת. עיצוב משיב קריאות לסקירה ועריכה.
  • הזחה לא עקבית: JSON שהודבק ממקורות שונים עלול להכיל טאבים ורווחים מעורבים או עומקי הזחה שונים. עיצוב מחדש מאחד ומסדיר את ההבדלים, ומעלה את הבהירות והעקביות.
  • מבנים גדולים/מקוננים: מערכים או אובייקטים עמוקים (לדוגמה קבצי קונפיגורציה או תגובות API מורכבות) הופכים לנגישים וקל לגלות בהם כשמעוצבים, עם אפשרות לכיווץ בעורכים תומכים.

שימוש מעשי: עיצוב תגובות API

בעת עבודה עם API צד שלישי (כגון AWS, Stripe או Google Cloud), התגובות לרוב קומפקטיות לשיפור מהירות. עיצוב הפלט מקל על איתור שדות חסרים, איתור תקלות או שיתוף עם הצוות.

דוגמה: תגובת API גולמית
{"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.

JavaScript (Node.js)
Install: Standard library
const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);
Python
Install: Standard library (json)
import json
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = json.dumps(json.loads(ugly), indent=2)
print(pretty)
Go
Install: Standard library (encoding/json)
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))
}
Java
Install: com.fasterxml.jackson.core:jackson-databind
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);
  }
}
C#
Install: Newtonsoft.Json (Json.NET)
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
Install: Standard library (json_decode/json_encode)
<?php
$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
$obj = json_decode($ugly);
echo json_encode($obj, JSON_PRETTY_PRINT);
Ruby
Install: Standard library (json)
require 'json'
ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
pretty = JSON.pretty_generate(JSON.parse(ugly))
puts pretty
Bash (Linux/macOS) with jq
Install: brew install jq (or apt-get install jq)
echo '{"name":"Alice","age":30,"roles":["admin","user"]}' | jq .
Rust
Install: cargo add serde_json
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);
}
Kotlin
Install: com.fasterxml.jackson.core:jackson-databind
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)
}
Swift
Install: Standard library (JSONSerialization)
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)
}
TypeScript
Install: Standard library
const ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
const pretty = JSON.stringify(JSON.parse(ugly), null, 2);
console.log(pretty);
SQL (PostgreSQL)
Install: Standard (jsonb_pretty)
SELECT jsonb_pretty('{"name":"Alice","age":30,"roles":["admin","user"]}'::jsonb);
MySQL
Install: Standard (JSON_PRETTY, 5.7+)
SELECT JSON_PRETTY('{"name":"Alice","age":30,"roles":["admin","user"]}');
PowerShell
Install: Standard
$ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}'
$obj = $ugly | ConvertFrom-Json
$pretty = $obj | ConvertTo-Json -Depth 10
Write-Output $pretty
Perl
Install: cpan JSON
use JSON;
my $ugly = '{"name":"Alice","age":30,"roles":["admin","user"]}';
my $obj = decode_json($ugly);
print to_json($obj, { pretty => 1 });
Dart
Install: Standard library (dart:convert)
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);
}
Elixir
Install: mix deps.get jason
ugly = ~s({"name":"Alice","age":30,"roles":["admin","user"]})
{:ok, obj} = Jason.decode(ugly)
pretty = Jason.encode!(obj, pretty: true)
IO.puts(pretty)
Scala
Install: com.typesafe.play:play-json_2.13:2.9.4
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)
}