5 Kesalahan Sintaksis JSON yang Umum dan Cara Memperbaikinya

# 5 Kesalahan Sintaksis JSON yang Umum dan Cara Memperbaikinya

JSON (JavaScript Object Notation) ada di mana-mana dalam pengembangan web modern—mulai dari respons API hingga file konfigurasi. Meskipun sintaksisnya sederhana, pengembang terus-menerus menghadapi kesalahan JSON yang membuat frustrasi dan merusak aplikasi.

Panduan ini membahas 5 kesalahan sintaksis JSON yang paling umum yang akan Anda temui, cara mengidentifikasinya secara instan, dan cara memperbaikinya secara permanen.

---

Mengapa Kesalahan JSON Begitu Umum

Persyaratan sintaksis JSON yang ketat berarti satu karakter yang salah tempat pun dapat membatalkan seluruh dokumen. Tidak seperti JavaScript, JSON:

• ✅ Memerlukan tanda kutip ganda untuk string (tanda kutip tunggal tidak valid)
• ✅ Melarang koma di akhir (trailing commas)
• ✅ Mewajibkan pemformatan yang tepat untuk kunci dan nilai
• ✅ Tidak mengizinkan komentar sama sekali

Mari kita pelajari kesalahan yang paling sering menjebak pengembang.

---

Kesalahan #1: Koma di Akhir / Trailing Commas (Si Pembunuh Senyap)

Masalahnya

Trailing commas—koma ekstra setelah item terakhir dalam array atau objek—sangat valid di JavaScript tetapi sama sekali dilarang di JSON.

❌ JSON Tidak Valid

{
  "username": "alice123",
  "email": "alice@example.com",
  "active": true,
}

{
  "products": [
    { "id": 1, "name": "Laptop" },
    { "id": 2, "name": "Mouse" },
    { "id": 3, "name": "Keyboard" },
  ]
}

✅ JSON Valid

{
  "username": "alice123",
  "email": "alice@example.com",
  "active": true
}

{
  "products": [
    { "id": 1, "name": "Laptop" },
    { "id": 2, "name": "Mouse" },
    { "id": 3, "name": "Keyboard" }
  ]
}

Pesan Kesalahan yang Akan Anda Lihat

Unexpected token } in JSON at position 78
SyntaxError: Trailing comma in JSON

Cara Memperbaikinya

Perbaikan Manual:

Periksa koma sebelum kurung kurawal tutup } atau kurung siku tutup ]

Hapus koma di akhir tersebut

Validasi dengan linter JSON

Tips Pencegahan: Gunakan pemformat JSON seperti BigJSON yang secara otomatis mendeteksi dan menyoroti trailing commas. Tips Pro untuk Pengembang:

// Di editor kode Anda, cari pola-pola ini:
,\s}   // Koma sebelum kurung kurawal tutup

,\s]   // Koma sebelum kurung siku tutup

---

Kesalahan #2: Tanda Kutip Tunggal Alih-alih Tanda Kutip Ganda

Masalahnya

JavaScript mengizinkan tanda kutip tunggal maupun ganda untuk string, tetapi JSON hanya menerima tanda kutip ganda ("). Menggunakan tanda kutip tunggal adalah salah satu kesalahan paling umum saat mengonversi objek JavaScript ke JSON.

❌ JSON Tidak Valid

{
  'name': 'John Doe',
  'age': 30,
  'city': 'New York'
}

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

✅ JSON Valid

{
  "name": "John Doe",
  "age": 30,
  "city": "New York"
}

Pesan Kesalahan yang Akan Anda Lihat

Unexpected token ' in JSON at position 2
SyntaxError: Expected property name or '}' in JSON

Cara Memperbaikinya

Perbaikan Cepat:

// JavaScript: Konversi kutip tunggal ke ganda
const fixedJson = invalidJson.replace(/'/g, '"');

Pendekatan Lebih Baik: Gunakan serialisasi JSON yang tepat:

// Alih-alih menulis JSON secara manual dengan tanda kutip:
const wrong = "{ 'name': 'John' }";  // ❌

// Gunakan JSON.stringify():
const obj = { name: 'John' };
const correct = JSON.stringify(obj);  // ✅ "{"name":"John"}"

Kapan Kesalahan Ini Terjadi

• Menyalin literal objek JavaScript dan lupa mengonversi tanda kutip
• Mengetik JSON secara manual tanpa editor yang tepat
• Menggunakan literal template secara tidak benar

---

Kesalahan #3: Kunci Tanpa Tanda Kutip (Unquoted Keys)

Masalahnya

Dalam JavaScript, kunci objek tidak perlu diberi tanda kutip jika itu adalah pengenal (identifier) yang valid. JSON mengharuskan semua kunci berupa string yang dibungkus dengan tanda kutip ganda.

❌ JSON Tidak Valid

{
  name: "Alice",
  age: 28,
  isActive: true
}

{
  user_id: 42,
  "email": "test@example.com"
}

✅ JSON Valid

{
  "name": "Alice",
  "age": 28,
  "isActive": true
}

{
  "user_id": 42,
  "email": "test@example.com"
}

Pesan Kesalahan yang Akan Anda Lihat

Unexpected token n in JSON at position 4
SyntaxError: Expected property name enclosed in double quotes

Cara Memperbaikinya

Pengguna Visual Studio Code:

Instal ekstensi bahasa "JSON"

Format dokumen Anda (Shift + Alt + F)

VS Code akan menyoroti kunci tanpa tanda kutip dengan warna merah

Pola Cari dan Ganti (Find and Replace):

Cari:    (\\w+):\\s
Ganti: "$1":

Contoh Dunia Nyata

// Kesalahan umum saat mencatat (logging):
console.log({ status: 'success', data: result });  // JS Valid ✅

// Mencoba menyimpan ini sebagai JSON:
{
  status: "success",  // ❌ JSON Tidak Valid
  data: { ... }
}

// JSON yang Benar:
{
  "status": "success",  // ✅
  "data": { ... }
}

---

Kesalahan #4: Urutan Escape yang Tidak Valid (Invalid Escape Sequences)

Masalahnya

JSON mendukung urutan escape yang terbatas. Menggunakan urutan escape yang tidak valid atau lupa me-escape karakter khusus akan menyebabkan kesalahan penguraian (parsing).

❌ JSON Tidak Valid

{
  "path": "C:\\Users\\Alice\\Documents",
  "message": "Line 1
Line 2"
}

{
  "quote": "He said "hello" to me"
}

✅ JSON Valid

{
  "path": "C:\\\\Users\\\\Alice\\\\Documents",
  "message": "Line 1\nLine 2"
}

{
  "quote": "He said \"hello\" to me"
}

Urutan Escape yang Valid di JSON

| Karakter | Urutan Escape | Deskripsi |

|-----------|----------------|-------------|

| " | \" | Tanda kutip ganda |

| \ | \\\\ | Backslash |

| / | \/ | Forward slash |

| Newline | \n | Line feed |

| Tab | \t | Tab horizontal |

| Carriage return | \r | Carriage return |

| Backspace | \b | Backspace |

| Form feed | \f | Form feed |

| Unicode | \uXXXX | Karakter Unicode |

Pesan Kesalahan yang Akan Anda Lihat

Unexpected token in JSON at position 25
SyntaxError: Invalid escape sequence

Cara Memperbaikinya

Escaping JavaScript:

// Menangani escaping secara otomatis:
const data = {
  path: "C:\\Users\\Alice",
  message: "Line 1\nLine 2"
};

const json = JSON.stringify(data);
// Hasil: {"path":"C:\\\\Users\\\\Alice","message":"Line 1\\nLine 2"}

Escaping Path Manual:

const windowsPath = "C:\\Users\\Alice";
const jsonPath = windowsPath.replace(/\\/g, "\\\\\\\\");

---

Kesalahan #5: Komentar dalam JSON (JSON ≠ JavaScript!)

Masalahnya

Pengembang sering menambahkan komentar ke file JSON untuk dokumentasi, tetapi JSON tidak mendukung komentar apa pun. Tidak ada //, tidak ada / /, tidak ada apa pun.

❌ JSON Tidak Valid

{
  // Konfigurasi pengguna
  "username": "admin",
  "role": "superuser",
  / Ini adalah sementara

     Hapus di produksi /
  "debugMode": true
}

✅ JSON Valid (Komentar Tidak Diperbolehkan)

{
  "username": "admin",
  "role": "superuser",
  "debugMode": true
}

Pesan Kesalahan yang Akan Anda Lihat

Unexpected token / in JSON at position 4
SyntaxError: JSON does not support comments

Solusi Alternatif

Opsi 1: Gunakan Field Komentar

{
  "_comment": "Konfigurasi pengguna - perbarui sebelum produksi",
  "username": "admin",
  "role": "superuser",
  "debugMode": true
}

Opsi 2: Gunakan JSON5 atau JSONC

Untuk file konfigurasi, pertimbangkan:

• JSON5: Mendukung komentar, trailing commas, dan banyak lagi
• JSONC: JSON with Comments (digunakan oleh VS Code)

// config.json5
{
  // Konfigurasi pengguna
  username: "admin",  // Tidak perlu tanda kutip
  role: "superuser",
  debugMode: true,    // Trailing comma OK!
}

Opsi 3: File Dokumentasi Terpisah

proyek/
├── config.json          # JSON Murni
├── config.README.md     # Dokumentasi dengan komentar

---

Bonus: Cara Menemukan Kesalahan JSON Lebih Awal

1. Gunakan Validator Online

BigJSON Validator - Validasi instan dengan pesan kesalahan yang membantu:

• Tempel JSON Anda
• Dapatkan deteksi kesalahan baris demi baris
• Lihat dengan tepat di mana letak masalahnya

2. Ekstensi IDE

VS Code:

• Validasi JSON bawaan
• Instal "Error Lens" untuk pesan kesalahan sebaris (inline)

Sublime Text:

• Paket JSONLint

Atom:

• linter-jsonlint

3. Pre-Commit Hooks

# .git/hooks/pre-commit
#!/bin/bash
for file in $(git diff --cached --name-only | grep -E '\.json$'); do
  if ! python -m json.tool "$file" > /dev/null 2>&1; then
    echo "JSON tidak valid dalam $file"
    exit 1
  fi
done

4. Pengujian Otomatis

// Tes Jest
test('config.json valid', () => {
  const fs = require('fs');
  const config = fs.readFileSync('config.json', 'utf8');

  expect(() => {
    JSON.parse(config);
  }).not.toThrow();
});

---

Referensi Cepat: Daftar Periksa Deteksi Kesalahan

Sebelum mengirimkan atau menyebarkan file JSON, periksa:

• [ ] Tidak ada koma di akhir (trailing commas) setelah item terakhir
• [ ] Semua string menggunakan tanda kutip ganda (")
• [ ] Semua kunci objek diberi tanda kutip
• [ ] Karakter khusus di-escape dengan benar
• [ ] Tidak ada komentar di mana pun
• [ ] Penempatan kurung dan kurawal yang benar
• [ ] Tipe data valid (string, number, boolean, null, object, array)
• [ ] Angka tidak memiliki nol di depan (kecuali 0.x)

---

Alat untuk Mencegah Kesalahan JSON

1. BigJSON Online Tools

Kunjungi BigJSON untuk:

• Formatter: Memperbaiki masalah pemformatan secara otomatis
• Validator: Pemeriksaan sintaksis instan
• Minifier: Menghapus spasi untuk produksi

2. Alat Baris Perintah (Command-Line Tools)

# Validator bawaan Node.js
node -e "JSON.parse(require('fs').readFileSync('file.json'))"

# Validator Python
python -m json.tool file.json

# jq (pemroses JSON)
jq . file.json

3. Alat Pengembang Browser

// Validasi konsol
try {
  JSON.parse(jsonString);
  console.log('✅ JSON Valid');
} catch (e) {
  console.error('❌ Tidak Valid:', e.message);
}

---

Pesan Kesalahan Umum Diterjemahkan

| Pesan Kesalahan | Kemungkinan Penyebab | Perbaikan |

|--------------|-------------|-----|

| Unexpected token , | Trailing comma | Hapus koma sebelum } atau ] |

| Unexpected token ' | Tanda kutip tunggal | Ganti dengan tanda kutip ganda |

| Expected property name | Kunci tanpa tanda kutip | Beri tanda kutip pada semua kunci objek |

| Unexpected token } | Kurang koma | Tambahkan koma antar item |

| Unexpected end of JSON | Kurung/kurawal belum ditutup | Periksa penempatan kurung |

| Invalid escape sequence | Karakter escape salah | Gunakan escape yang valid (\\, \n, dll.) |

---

Contoh Dunia Nyata: Men-debug Respons API

Mari kita perbaiki respons API nyata dengan beberapa kesalahan:

❌ Sebelum (Tidak Valid)

{
  success: true,              // Kesalahan: Kunci tanpa tanda kutip
  'message': 'Data retrieved', // Kesalahan: Tanda kutip tunggal
  data: [
    {
      id: 1,
      name: "Product A",
      price: 29.99,
    },                         // Kesalahan: Trailing comma
    {
      id: 2,
      name: "Product B",
      // Catatan: Penawaran khusus  // Kesalahan: Komentar
      price: 19.99
    }
  ],                           // Kesalahan: Trailing comma
}

✅ Sesudah (Valid)

{
  "success": true,
  "message": "Data retrieved",
  "data": [
    {
      "id": 1,
      "name": "Product A",
      "price": 29.99
    },
    {
      "id": 2,
      "name": "Product B",
      "price": 19.99
    }
  ]
}

---

Mencegah Kesalahan dalam Alur Kerja Anda

Untuk Pengembang

// Selalu gunakan JSON.stringify() alih-alih penggabungan manual
const config = {
  apiKey: process.env.API_KEY,
  timeout: 5000
};

// ❌ Manual (rawan kesalahan)
const json = '{ "apiKey": "' + config.apiKey + '", "timeout": ' + config.timeout + ' }';

// ✅ Otomatis (aman)
const json = JSON.stringify(config);

Untuk File Konfigurasi

Gunakan validasi ketat di editor Anda

Siapkan aturan linting

Tambahkan validasi ke pipeline CI/CD

Uji file JSON sebagai bagian dari proses build

Untuk Respons API

// Contoh Express.js
app.get('/api/data', (req, res) => {
  const data = { status: 'ok', results: [...] };

  // ❌ Pembuatan string manual
  res.send('{"status":"' + data.status + '"}');

  // ✅ Serialisasi JSON otomatis
  res.json(data);  // Menangani escaping, tanda kutip, dll.
});

---

Kesimpulan

5 kesalahan sintaksis JSON yang paling umum adalah:

Trailing commas - Hapus koma sebelum } dan ]

Single quotes - Selalu gunakan tanda kutip ganda (")

Unquoted keys - Beri tanda kutip pada semua kunci objek

Invalid escapes - Gunakan urutan escape yang tepat

Comments - Hapus semua komentar (gunakan JSON5 jika perlu)

Ingat: JSON bukan JavaScript! Sintaksisnya yang ketat tidak memberikan ruang untuk fleksibilitas.

Langkah Selanjutnya

Validasi JSON Anda: Gunakan BigJSON Validator

Format otomatis: Gunakan BigJSON Formatter

Pelajari lebih lanjut: Baca Panduan Lengkap JSON kami

Punya pertanyaan tentang kesalahan JSON? Berikan komentar di bawah!

---

Sumber Daya Terkait

• Kesalahan JSON Umum dan Cara Memperbaikinya
• Cara Memformat File JSON
• Alat Validator JSON
• Format JSON Online

---

Terakhir diperbarui: 15 Februari 2026