API'lere istek yaptığımızda bize veri dönüyor. Peki bu veri hangi formatta geliyor? Cevap: Neredeyse her zaman JSON.
JSON, web dünyasının ortak dili haline geldi. Farklı programlama dilleri, farklı sistemler arasında veri taşımanın en popüler yolu. Bu makalede JSON'ın ne olduğunu, nasıl yazıldığını ve JavaScript'te nasıl kullanıldığını öğreneceksiniz.
JSON Ne Demek?
JSON, "JavaScript Object Notation" ifadesinin kısaltmasıdır. Türkçesiyle "JavaScript Nesne Gösterimi".
Adında JavaScript geçiyor ama JSON, JavaScript değildir. JSON sadece bir veri formatıdır. Python, Java, PHP, C# - hangi dili kullanırsanız kullanın, JSON ile çalışabilirsiniz.
Neden JSON?
API'ler bize neden doğrudan HTML göndermez? Karşılaştıralım:
Senaryo: Bir Kullanıcının Bilgilerini Al
HTML ile (gereksiz yere uzun):
<!DOCTYPE html>
<html>
<head>
<title>Kullanıcı Bilgileri</title>
<style>
.card { border: 1px solid #ccc; padding: 20px; }
.name { font-size: 24px; font-weight: bold; }
.email { color: #666; }
</style>
</head>
<body>
<div class="card">
<p class="name">Elif Yıldız</p>
<p class="email">elif@mail.com</p>
<p class="age">28</p>
</div>
</body>
</html>30+ satır kod. Stil, yapı, etiketler... Oysa bize sadece 3 bilgi lazım: isim, email, yaş.
JSON ile (sadece veri):
{
"isim": "Elif Yıldız",
"email": "elif@mail.com",
"yas": 28
}5 satır. Sadece ihtiyacımız olan veri. Hızlı, hafif, net.
JSON'dan Önce: XML
JSON'dan önce XML (eXtensible Markup Language) kullanılıyordu. AJAX terimindeki "X" de XML'den gelir.
Aynı veri XML ile:
<?xml version="1.0" encoding="UTF-8"?>
<kullanici>
<isim>Elif Yıldız</isim>
<email>elif@mail.com</email>
<yas>28</yas>
</kullanici>XML hâlâ bazı yerlerde kullanılıyor ama web API'lerinde JSON standart haline geldi. Nedenleri:
- JSON daha kısa
- JSON okumak daha kolay
- JSON JavaScript ile doğal uyumlu
- JSON parse etmek daha hızlı
JSON Söz Dizimi
JSON'ın katı kuralları var. Bu kuralları bilmezseniz hatalarla karşılaşırsınız.
Kural 1: Anahtarlar Çift Tırnak İçinde Olmalı
{ "isim": "Ahmet" } ✓ Doğru
{ isim: "Ahmet" } ✗ Yanlış (tırnaksız)
{ 'isim': 'Ahmet' } ✗ Yanlış (tek tırnak)JavaScript'te nesne tanımlarken tırnaksız yazabilirsiniz, ama JSON'da kesinlikle çift tırnak gerekli.
Kural 2: String Değerler Çift Tırnak İçinde
{ "sehir": "Ankara" } ✓ Doğru
{ "sehir": 'Ankara' } ✗ Yanlış (tek tırnak)
{ "sehir": Ankara } ✗ Yanlış (tırnaksız)Kural 3: Desteklenen Veri Tipleri
JSON'da kullanabileceğiniz veri tipleri sınırlıdır:
| Tip | Örnek | Açıklama |
|---|---|---|
| String | "Merhaba" | Metin, çift tırnak içinde |
| Number | 42, 3.14, -10 | Tam sayı veya ondalık |
| Boolean | true, false | Mantıksal değer |
| null | null | Boş/tanımsız değer |
| Array | [1, 2, 3] | Dizi/liste |
| Object | {"a": 1} | İç içe nesne |
Kural 4: undefined YOKTUR
JavaScript'te undefined var ama JSON'da yok:
// JavaScript - Geçerli
const kullanici = {
isim: "Can",
adres: undefined
};
// JSON - Geçersiz!
{
"isim": "Can",
"adres": undefined // HATA!
}Eğer bir değer bilinmiyorsa null kullanın veya o alanı hiç eklemeyin.
Kural 5: Sonda Virgül Olmaz
{
"isim": "Zeynep",
"yas": 25, // ← Bu virgül sorun değil
"sehir": "İzmir" // ← Sonda virgül YOK
}{
"isim": "Zeynep",
"yas": 25,
"sehir": "İzmir", // ✗ HATA! Sonda virgül
}Kural 6: Yorum Satırı Yazılamaz
JSON'da yorum yazamazsınız:
{
"fiyat": 100,
// Bu bir yorum - HATA!
"kdv": 18
}JSON Örnekleri
Basit Nesne
{
"urunAdi": "Kablosuz Kulaklık",
"marka": "SoundMax",
"fiyat": 450.99,
"stokta": true
}İç İçe Nesne
{
"siparis_no": "SP-2024-001",
"musteri": {
"ad": "Murat Demir",
"telefon": "555-123-4567",
"adres": {
"il": "İstanbul",
"ilce": "Kadıköy",
"mahalle": "Caferağa"
}
},
"toplam": 1250.00
}Dizi (Array)
{
"oyuncu": "Gamer42",
"skorlar": [1500, 2300, 1800, 2100, 2500],
"rozetler": ["Çaylak", "Avcı", "Şampiyon"]
}Nesne Dizisi
{
"filmler": [
{
"ad": "Inception",
"yil": 2010,
"puan": 8.8
},
{
"ad": "Interstellar",
"yil": 2014,
"puan": 8.6
},
{
"ad": "The Dark Knight",
"yil": 2008,
"puan": 9.0
}
]
}JavaScript'te JSON İşlemleri
JavaScript'te JSON ile çalışmak için iki temel metod var:
JSON.parse() - JSON'dan JavaScript'e
API'den gelen veri string formatındadır. Bunu JavaScript nesnesine çevirmek için JSON.parse() kullanırız.
// API'den gelen string (ham veri)
const jsonString = '{"urun": "Mouse", "fiyat": 120, "stok": true}';
// Bu bir string, nesne gibi erişemezsiniz
console.log(jsonString.urun); // undefined (çalışmaz!)
// JSON.parse ile çevirin
const urun = JSON.parse(jsonString);
// Artık nesne gibi kullanabilirsiniz
console.log(urun.urun); // "Mouse"
console.log(urun.fiyat); // 120
console.log(urun.stok); // trueJSON.stringify() - JavaScript'ten JSON'a
Bir veriyi API'ye göndermek istediğinizde JavaScript nesnesini JSON string'e çevirmeniz gerekir.
// JavaScript nesnesi
const sepet = {
urunler: ["Laptop", "Mouse", "Klavye"],
toplamTutar: 18500,
kargoUcretsiz: true
};
// JSON string'e çevir
const jsonString = JSON.stringify(sepet);
console.log(jsonString);
// '{"urunler":["Laptop","Mouse","Klavye"],"toplamTutar":18500,"kargoUcretsiz":true}'
// Bu string'i API'ye gönderebilirsinizGüzel Formatlama
JSON.stringify() ile okunabilir format elde edebilirsiniz:
const veri = { isim: "Test", deger: 42 };
// Normal (tek satır)
JSON.stringify(veri);
// '{"isim":"Test","deger":42}'
// Güzel formatlanmış (2 boşluk girinti)
JSON.stringify(veri, null, 2);
/*
{
"isim": "Test",
"deger": 42
}
*/Sık Yapılan Hatalar
Hata 1: Zaten Nesne Olan Veriyi Parse Etmeye Çalışmak
const veri = { isim: "Ali" }; // Bu zaten bir nesne
JSON.parse(veri); // HATA! String bekliyordu, nesne geldiHata 2: Geçersiz JSON Parse Etmeye Çalışmak
const bozukJson = "{ isim: 'Ali' }"; // Tek tırnak ve tırnaksız anahtar
JSON.parse(bozukJson); // HATA! Geçersiz JSONHata 3: Parse Hatalarını Yakalamamak
// Kötü pratik
const veri = JSON.parse(bilinmeyenString); // Hata olursa uygulama çöker
// İyi pratik
try {
const veri = JSON.parse(bilinmeyenString);
console.log(veri);
} catch (hata) {
console.log("JSON parse edilemedi:", hata.message);
}Gerçek Dünya Örneği
Bir e-ticaret API'sinden ürün listesi aldığınızı düşünün:
// API'den gelen yanıt (string)
const apiYaniti = `{
"basarili": true,
"urunSayisi": 3,
"urunler": [
{"id": 1, "ad": "Laptop", "fiyat": 15000},
{"id": 2, "ad": "Telefon", "fiyat": 8000},
{"id": 3, "ad": "Tablet", "fiyat": 5000}
]
}`;
// Parse et
const veri = JSON.parse(apiYaniti);
// Kullan
if (veri.basarili) {
console.log(`${veri.urunSayisi} ürün bulundu:`);
veri.urunler.forEach(urun => {
console.log(`- ${urun.ad}: ${urun.fiyat} TL`);
});
}
// Çıktı:
// 3 ürün bulundu:
// - Laptop: 15000 TL
// - Telefon: 8000 TL
// - Tablet: 5000 TLJSON Doğrulama Araçları
JSON yazarken hata yapmak kolay. Bu araçlar JSON'unuzun geçerli olup olmadığını kontrol eder:
- JSONLint (jsonlint.com) - Doğrulama ve formatlama
- JSON Formatter (jsonformatter.org) - Görsel düzenleme
- VS Code - JSON dosyalarında otomatik hata gösterimi
Özet
| Kavram | Açıklama |
|---|---|
| JSON | JavaScript Object Notation - veri formatı |
| Amaç | Sistemler arası veri taşıma |
| Kurallar | Çift tırnak, undefined yok, sonda virgül yok |
| JSON.parse() | JSON string → JavaScript nesnesi |
| JSON.stringify() | JavaScript nesnesi → JSON string |
Sırada Ne Var?
JSON'ın ne olduğunu ve JavaScript'te nasıl kullanıldığını öğrendik.
Bir sonraki makalede API'leri test etmek için kullanılan araçları (Postman/Hoppscotch) inceleyeceğiz.
