Cara Memperbaiki SyntaxError: Token tak terduga < di JSON pada posisi 0

Kesalahan SyntaxError: Token tak terduga << di JSON pada posisi 0 menunjukkan bahwa kode JavaScript menerima data non-JSON, biasanya HTML, bukan JSON yang diharapkan. Untuk memperbaiki masalah ini, periksa data yang diterima untuk menentukan masalahnya. Jika menggunakan fetch() atau JSON.parse(), catat data ke konsol dan periksa masalah umum seperti URL yang salah, kesalahan server, atau masalah penetapan variabel dan pengodean karakter.

Panduan ini akan membantu memperbaiki SyntaxError: Token tak terduga < di JSON pada posisi 0. Panduan ini juga berlaku untuk varian umum lainnya dari kesalahan yang sama:

Ringkasan

Kesalahan ini menunjukkan kode JavaScript Anda diharapkan menerima JSON tetapi malah mendapatkan sesuatu yang lain (mungkin HTML dalam bentuk kesalahan sisi server). Untuk memperbaiki masalah, Anda perlu memeriksa apa yang Anda dapatkan sebagai ganti JSON yang diharapkan untuk menentukan apa masalahnya.

Detail

Biasanya kesalahan ini disebabkan ketika server Anda mengembalikan HTML (yang biasanya dimulai dengan <DOCTYPE html> atau <html>), bukan JSON. JSON yang valid tidak dapat dimulai dengan karakter <, sehingga pengurai JSON segera mengetahui bahwa data tersebut bukan JSON yang valid dan menghasilkan salah satu pesan kesalahan yang disebutkan di atas.

Untuk memperbaiki kesalahan ini, Anda perlu mencari tahu mengapa Anda mendapatkan HTML (atau yang lainnya) daripada JSON yang Anda harapkan. Untuk melakukan ini, Anda perlu mencatat data yang Anda coba uraikan ke konsol.

Jika Anda menggunakan fetch()

Gunakan pendekatan ini jika kode Anda terlihat seperti ini:

fetch('https://example.com/some/path/to/json')
.then(function (response) {
    return response.json();
})
.then(function (data) {
    // Do something with data
});

Dalam hal ini kesalahan muncul ketika response.json() mencoba menjalankan dan gagal mengurai data dari server sebagai JSON. Anda dapat menambahkan fungsi untuk menangani kesalahan dan menampilkan teks mentah dari isi respons dari server dan mencatatnya ke konsol (lihat catatan tentang baris komentar di bawah:

var responseClone; // 1
fetch('https://example.com/some/path/to/json')
.then(function (response) {
    responseClone = response.clone(); // 2
    return response.json();
})
.then(function (data) {
    // Do something with data
}, function (rejectionReason) { // 3
    console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
    responseClone.text() // 5
    .then(function (bodyText) {
        console.log('Received the following instead of valid JSON:', bodyText); // 6
    });
});

Berikut penjelasan setiap baris dengan komentar bernomor:

  1. Variabel responseClone diperlukan untuk memiliki klon dari objek response karena isi response hanya bisa dibaca sekali. Saat response.json() dipanggil, isi response asli dibaca, yang berarti tidak dapat dibaca lagi saat menangani kesalahan penguraian JSON. Saat mengkloning response ke responseClone, akan ada dua salinan isi respons yang dapat digunakan; satu di response asli untuk digunakan dengan response.json() dan satu lagi untuk digunakan dengan responseClone.text() jika response.json() gagal.
  2. Baris ini mengisi variabel responseClone dengan klon dari respons yang diterima dari server.
  3. Argumen fungsi kedua diteruskan ke fungsi then() yang mengikuti panggilan response.json(). Fungsi kedua ini akan dipanggil jika janji dari response.json() ditolak (yaitu kesalahan JSON ditemukan).
  4. Baris ini mencatat rejectionReason dari janji response.json() yang ditolak dan responseClone sehingga dapat diperiksa jika diperlukan (kode status HTTP sering berguna untuk debugging, misalnya).
  5. Daripada mencoba mengurai isi respons dari server sebagai JSON, teks tersebut diproses sebagai raw text.
  6. Teks isi dicatat ke konsol untuk diperiksa.

Jika Anda menggunakan JSON.parse()

Gunakan metode ini jika kode yang memunculkan kesalahan terlihat seperti ini:

JSON.parse(data);

Dalam hal ini Anda dapat mencatat data ke konsol jika terjadi kesalahan untuk melihat isinya:

try {
    JSON.parse(data);
}
catch (error) {
    console.log('Error parsing JSON:', error, data);
}

Apa yang harus saya lakukan selanjutnya?

Setelah Anda dapat melihat data yang menyebabkan kesalahan penguraian JSON, diharapkan akan memberikan petunjuk mengapa Anda tidak mendapatkan JSON valid yang Anda harapkan. Beberapa masalah paling umum yang menyebabkan kesalahan ini adalah: