Belajar Cara Membaca dan Menulis JSON di JavaScript dengan Cepat
Oleh
Hazar Farras
Hai DomaiNesians! Pernah nggak sih kamu ketemu data dalam format JSON tapi bingung gimana cara mengolahnya di JavaScript? Banyak developer pemula yang belum paham betul cara membaca dan menulis JSON di JavaScript, padahal format ini udah jadi “bahasa wajib” buat tukar-menukar data di web modern.
JSON itu sebenarnya sederhana, tapi kalau nggak tahu trik parsing atau stringify, bisa bikin pusing sendiri. Nah, di artikel ini kami bakal bahas step by step gimana caranya kamu bisa membaca, menulis, sampai kirim data JSON baik di browser maupun di Node.js. Santai aja, bahasanya ringan, tapi tetap bisa langsung kamu praktikkan di projectmu.
Memahami Dasar: JSON vs Object JavaScript
Langkah awal memahami cara membaca dan menulis JSON di JavaScript adalah menyadari bahwa JSON dan object JavaScript bukanlah hal yang sama persis.
Secara tampilan, JSON itu mirip banget sama object di JavaScript. Sekilas mirip, karena keduanya sama-sama pakai struktur key: value, bisa menyimpan array, bahkan menampung object di dalam object. Bedanya, JSON punya aturan yang lebih “ketat”. Misalnya, semua key wajib ditulis pakai double quotes (" "), sedangkan di JavaScript object masih bisa pakai key tanpa tanda kutip.
Ibaratnya, object di JavaScript itu kayak catatan di sticky note, kamu bebas nulis pakai singkatan atau gaya unik sendiri. Sementara JSON itu kayak form resmi yang harus diisi sesuai aturan baku, supaya bisa dipahami semua orang (dan mesin).
Contoh perbedaan sederhana:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// JavaScript Object const user = { name: "Raka", age: 25, isActive: true }; // JSON String const jsonUser = `{ "name": "Raka", "age": 25, "isActive": true }`; |
Dari sini keliatan kalau JSON sebenarnya hanyalah representasi data dalam bentuk string, bukan object langsung. Supaya data JSON bisa diolah di JavaScript, string tersebut perlu diubah dulu ke object lewat proses parsing.
Membaca JSON di Browser dengan JSON.parse()
Sekarang masuk ke praktik nyata. Bagian penting dari cara membaca dan menulis JSON di JavaScript adalah mengonversi data dalam bentuk string JSON menjadi object yang bisa diproses di kode. Caranya gampang, cukup pakai fungsi bawaan JSON.parse().
Contoh paling simpel gini:
|
1 2 3 4 5 6 7 8 9 10 |
const jsonString = `{ "title": "Belajar JSON", "level": "pemula", "isFree": true }`; const data = JSON.parse(jsonString); console.log(data.title); // Output: Belajar JSON console.log(data.level); // Output: pemula |
Dengan JSON.parse(), string JSON otomatis berubah jadi object yang bisa kamu akses pakai dot notation (data.title, data.level, dll). Ini jadi dasar banget kalau kamu ingin memahami cara membaca dan menulis JSON di JavaScript untuk kebutuhan aplikasi web.
Tapi hati-hati, kalau format JSONnya salah, parsing bisa gagal dan membuat error. Misalnya lupa pakai tanda kutip ganda (") di key atau ada koma nyasar di akhir data. Jadi best practicenya, selalu bungkus JSON.parse() dengan try...catch:
|
1 2 3 4 5 6 |
try { const data = JSON.parse(jsonString); console.log(data); } catch (error) { console.error("Format JSON tidak valid:", error); } |
Dengan cara ini, aplikasi tetap aman meskipun ada data JSON yang error.
Menulis JSON di Browser dengan JSON.stringify()
Kalau tadi sudah bahas cara parsing, sekarang bagian lain dari cara membaca dan menulis JSON di JavaScript adalah mengubah object menjadi string JSON. Proses ini disebut serialize dan caranya pakai fungsi bawaan JSON.stringify().
Misalnya kamu punya object JavaScript biasa:
|
1 2 3 4 5 6 7 8 9 10 |
const user = { name: "Sinta", age: 22, isActive: false }; const jsonString = JSON.stringify(user); console.log(jsonString); // Output: {"name":"Sinta","age":22,"isActive":false} |
Nah, hasil JSON.stringify() ini berupa string JSON yang bisa dikirim ke server lewat API, disimpan di localStorage, atau bahkan ditampilkan di UI kalau butuh.
Biar output lebih rapi dan mudah dibaca, kamu bisa tambahkan argumen tambahan di stringify() buat format indentasi:
|
1 2 3 4 5 6 7 8 9 10 |
const prettyJson = JSON.stringify(user, null, 2); console.log(prettyJson); /* { "name": "Sinta", "age": 22, "isActive": false } */ |
Dengan cara ini, kamu bukan hanya mengerti parsing JSON, tapi juga bisa membuat data dalam bentuk JSON string dengan rapi. Proses ini jadi kunci utama dalam cara membaca dan menulis JSON di JavaScript, dan wajib banget kamu kuasai biar tidak bingung saat mengolah data.
Interaksi dengan API lewat fetch
Di dunia nyata, kamu tidak hanya membuat JSON buat latihan doang, tapi juga sering banget harus kirim atau ambil data dari server. Nah, bagian ini penting banget dalam memahami cara membaca dan menulis JSON di JavaScript.
Membaca JSON dari API
Contoh nyata: ketika kamu request data dari API publik, hampir selalu response yang diterima berupa format JSON. Di JavaScript, kamu bisa pakai fetch() lalu panggil .json() buat parsing:
|
1 2 3 4 5 6 |
fetch("https://jsonplaceholder.typicode.com/posts/1") .then(response => response.json()) .then(data => { console.log("Data dari API:", data); }) .catch(error => console.error("Error:", error)); |
Dengan response.json(), string JSON dari server otomatis diparse jadi object yang bisa langsung kamu gunakan.
Menulis & Mengirim JSON ke Server
Untuk komunikasi ke backend, kamu harus mengonversi object ke string JSON dengan JSON.stringify(), sekaligus menambahkan header Content-Type: application/json:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const newPost = { title: "Belajar JSON", body: "Contoh kirim data JSON pakai fetch", userId: 1 }; fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(newPost) }) .then(response => response.json()) .then(data => { console.log("Response dari server:", data); }) .catch(error => console.error("Error:", error)); |
Dengan cara ini, proses kirim dan baca JSON di browser jadi lebih mudah dan efisien. Dan inilah kenapa menguasai cara membaca dan menulis JSON di JavaScript sangat penting buat interaksi data di aplikasi web modern.
Baca & Tulis File JSON di Node.js
Kalau di browser JSON biasanya datang dari API, di sisi backend kamu bisa langsung baca dan tulis file JSON pakai modul bawaan Node.js, yaitu fs (file system). Bagian ini juga jadi pondasi penting buat memahami cara membaca dan menulis JSON di JavaScript secara menyeluruh.
Membaca File JSON
Pertama, kamu bisa pakai fs.readFileSync() untuk cara sederhana:
|
1 2 3 4 5 6 |
const fs = require("fs"); const data = fs.readFileSync("data.json", "utf-8"); const parsed = JSON.parse(data); console.log(parsed); |
Dengan ini, isi file data.json langsung diparse jadi object JavaScript.
Versi non-blocking bisa dicapai dengan fs.readFile() asynchronous, pilihan tepat buat aplikasi Node.js yang menangani banyak request sekaligus:
|
1 2 3 4 5 6 7 8 |
fs.readFile("data.json", "utf-8", (err, data) => { if (err) { console.error("Gagal baca file:", err); return; } const parsed = JSON.parse(data); console.log(parsed); }); |
Menulis File JSON
Proses save object ke JSON file tidak sulit, tinggal convert pakai JSON.stringify() lalu tulis hasilnya ke file system.
|
1 2 3 4 5 6 7 8 |
const newUser = { name: "Ayu", age: 27, isActive: true }; fs.writeFileSync("user.json", JSON.stringify(newUser, null, 2)); console.log("File berhasil ditulis!"); |
Atau pakai versi asynchronous:
|
1 2 3 4 5 6 7 |
fs.writeFile("user.json", JSON.stringify(newUser, null, 2), (err) => { if (err) { console.error("Gagal menulis file:", err); return; } console.log("Data berhasil disimpan ke user.json"); }); |
Dengan begini, kamu bisa membaca dan menulis JSON di JavaScript baik di browser maupun di Node.js.
Approach Modern: fs/promises & Third-Party Library
Kalau kamu udah terbiasa dengan async/await, Node.js sekarang punya cara modern untuk membaca dan menulis JSON di JavaScript, yaitu lewat modul fs/promises. Ini membuat kode lebih rapi dibanding callback.
Membaca File JSON dengan fs/promises
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const fs = require("fs/promises"); async function readJson() { try { const data = await fs.readFile("data.json", "utf-8"); const parsed = JSON.parse(data); console.log(parsed); } catch (err) { console.error("Gagal baca file:", err); } } readJson(); |
Dengan await, alur kodenya terasa lebih linear dan gampang dipahami, tanpa harus masuk ke callback hell.
Menulis File JSON dengan fs/promises
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
async function writeJson() { const newPost = { title: "Belajar JSON Modern", body: "Contoh dengan fs/promises", author: "DomaiNesia" }; try { await fs.writeFile("post.json", JSON.stringify(newPost, null, 2)); console.log("File JSON berhasil ditulis!"); } catch (err) { console.error("Gagal menulis file:", err); } } writeJson(); |
Third-Party Library yang Membuat Praktis
Selain fs/promises, ada juga library pihak ketiga yang populer buat ngurus JSON:
jsonfile→ langsung punya fungsireadFiledanwriteFilekhusus JSON.fs-extra→ turunan darifsbawaan Node.js, tapi lebih powerful dengan API yang sederhana.
Contoh dengan jsonfile:
|
1 2 3 4 5 6 7 8 |
const jsonfile = require("jsonfile"); const file = "config.json"; const config = { debug: true, version: "1.0.0" }; jsonfile.writeFile(file, config, { spaces: 2 }) .then(() => console.log("File config.json tersimpan!")) .catch(err => console.error(err)); |
Dengan pendekatan yang lebih modern ini, kamu bisa menangani cara membaca dan menulis JSON di JavaScript secara rapi, minim error, dan scalable untuk aplikasi besar.
Tips & Pitfalls Umum
Menguasai cara membaca dan menulis JSON di JavaScript memang membuat kerjaan jadi lebih efisien. Tapi, ada beberapa hal kecil yang sering terlewat dan bisa jadi sumber error yang nyebelin. Supaya coding-mu makin aman, simak tips berikut.
- Hati-hati dengan
undefineddanfunction– kalau kamustringifyobject yang punya property berupaundefinedataufunction, data itu tidak akan ikut masuk ke JSON. Jadi jangan kaget kalau tiba-tiba hilang. - Selalu bungkus
JSON.parse()dengan try/catch – JSON yang rusak atau ada typo kecil aja bisa membuat parsing gagal. Jadi biasakan pakaitry...catchbiar aplikasi tidak langsung error fatal. - Menyimpan JSON besar di localStorage bukan ide bagus – meskipun bisa, performa aplikasi bakal keteteran. Cari opsi lain kayak IndexedDB atau server-side storage.
- Gunakan format indentasi untuk debugging – pas pengen mengecek hasil
stringify, tambahin argumen indentasi biar JSON lebih mudah dibaca. Ini simpel tapi membuat debugging lebih enak. - Validasi data sebelum diproses – jangan langsung percaya semua data JSON dari API. Cek dulu strukturnya sesuai ekspektasi. Ini bagian penting dari best practice dalam cara membaca dan menulis JSON di JavaScript.
Dengan menerapkan tips kecil ini, kamu bisa menghindari bug yang sering muncul saat mengurus JSON. Ingat, data itu jantung aplikasi modern, jadi pastikan selalu aman dan rapi. Kalau ngomongin soal keamanan data, pastinya jangan lupa juga untuk mengamankan website dengan Sertifikat SSL DomaiNesia, biar data yang kamu kirim dan terima tetap terenkripsi dengan baik.
JSON di JavaScript Jadi Lebih Mudah
Sekarang kamu udah paham bahwa cara membaca dan menulis JSON di JavaScript itu sebenarnya nggak ribet. Mulai dari parsing data dengan JSON.parse(), mengubah object jadi string pakai JSON.stringify(), sampai membaca dan menulis file JSON di Node.js, semua bisa dilakukan dengan tools bawaan tanpa harus ribet pakai library tambahan.
JSON sendiri bisa dibilang bahasa universal untuk pertukaran data. Hampir semua API modern, framework, bahkan database NoSQL seperti MongoDB mengandalkan format ini. Artinya, semakin kamu mahir dengan JSON, semakin mudah juga kamu beradaptasi dengan ekosistem web development yang luas.
Jangan lupa juga tips kecil tadi: validasi data sebelum dipakai, pakai indentasi biar debugging lebih gampang, dan selalu waspada dengan error parsing. Hal-hal sepele inilah yang biasanya bikin project jadi lebih rapi dan minim bug.
Dan terakhir, kalau ngomongin data, otomatis nggak bisa lepas dari isu keamanan. Semua data yang keluar-masuk website kamu harus dijaga biar nggak gampang disadap pihak ketiga. Di sinilah Sertifikat SSL DomaiNesia bisa jadi solusi. Dengan SSL aktif, komunikasi antar client dan server terenkripsi, jadi data JSON yang kamu kirim atau terima lewat API tetap aman.
Intinya, kuasai dasar, terapkan best practice, dan jangan lupa lindungi data kamu. Dengan begitu, belajar cara membaca dan menulis JSON di JavaScript nggak cuma bikin coding lebih gampang, tapi juga bikin aplikasi kamu lebih profesional dan aman untuk digunakan.
Hazar Farras
Hi ! I'm a Technical Content Specialist in DomaiNesia. Passionate about challenges, technology enthusiast, and dedicated K-pop lover always exploring new horizons and trends
