العمل مع JSON
JavaScript'te العمل مع JSON (JavaScript Object Notation) modern web geliştirme için kritik bir beceridir. JSON, verileri insan ve makine tarafından okunabilir biçimde organize eden hafif bir veri değişim formatıdır. Frontend ile backend arasında veri iletişimini kolaylaştırır, veri depolama, gönderme ve alma süreçlerini optimize eder. JSON’u, ev inşa etmek gibi düşünebilirsiniz: Her veri öğesi bir tuğla, her yapı bir odadır ve tüm ev verimli bir şekilde inşa edildiğinde işler sorunsuz ilerler.
Kişisel web sitelerinde JSON, portföy bilgilerini veya iletişim verilerini organize etmek için kullanılır. Blog sitelerinde yazılar, kategoriler ve yorumları yönetir. E-ticaret sitelerinde ürünler, stok bilgisi ve fiyatlar JSON ile yapılandırılır. Haber sitelerinde makaleler, yazarlar ve etiketler JSON ile organize edilir.
Bu eğitimde, JSON nesnelerini ve dizilerini oluşturmayı, JSON.parse ve JSON.stringify kullanımını, iç içe objelerle çalışmayı ve hata yönetimini öğreneceksiniz. Verilerinizi etkili bir şekilde organize etmeyi öğrenerek, web uygulamalarınızı daha güçlü, bakımı kolay ve profesyonel hâle getireceksiniz.
Temel Örnek
javascript// Example of a blog post object
const blogPost = {
"title": "ES6+ Özellikleri",
"author": "Ahmet Yılmaz",
"date": "2025-08-29",
"tags": \["JavaScript", "JSON", "Web"]
};
// Convert JavaScript object to JSON string
const jsonString = JSON.stringify(blogPost);
// Parse JSON string back to JavaScript object
const parsedPost = JSON.parse(jsonString);
console.log(parsedPost.title); // Output the blog post titleBu örnekte, blogPost adlı bir nesne oluşturduk ve title, author, date ve tags özelliklerini tanımladık. JSON.stringify() nesneyi bir JSON string’ine dönüştürür; bu, veriyi sunucuya göndermek veya localStorage’da saklamak için gereklidir. JSON.parse() ise string’i tekrar bir JavaScript nesnesine çevirir ve nesnenin özelliklerine erişim sağlar.
Önemli nokta, JSON’un fonksiyon veya undefined tiplerini desteklememesidir. Bu nedenle, veriyi string’e dönüştürmeden önce uygun şekilde hazırlamak gerekir. parsedPost.title ile title değerine ulaşabilir ve uygulamanızda kullanabilirsiniz. Bu yöntem, verilerin frontend ve backend arasında güvenli ve standart bir formatta taşınmasını sağlar.
Pratik Örnek
javascript// Example for e-commerce products
const products = \[
{ "id": 1, "name": "Laptop", "price": 1200, "stock": 10 },
{ "id": 2, "name": "Telefon", "price": 800, "stock": 25 },
{ "id": 3, "name": "Kulaklık", "price": 150, "stock": 50 }
];
// Convert array of products to JSON string
const productsJSON = JSON.stringify(products);
// Parse JSON string back to JavaScript array
const parsedProducts = JSON.parse(productsJSON);
// Display available products
parsedProducts.forEach(product => {
if (product.stock > 0) {
console.log(`Ürün: ${product.name}, Fiyat: ${product.price}`);
}
});Bu pratik örnekte, bir e-ticaret sitesinde ürünleri temsil eden bir dizi oluşturduk. Her ürün id, name, price ve stock özelliklerine sahip. JSON.stringify() diziyi string’e çevirir ve server veya localStorage ile iletişim için uygundur. JSON.parse() ise string’i tekrar diziye çevirir ve ürünlerin özelliklerine erişim sağlar.
forEach döngüsü ile stokta bulunan ürünleri konsola yazdırıyoruz. Bu yöntem, JSON’un veri iletiminde ve manipülasyonunda ne kadar güçlü olduğunu gösterir. Büyük veri setlerinde optimize edilmiş parse/stringify kullanımı performansı artırır.
İyi uygulamalar ve yaygın hatalar:
- Verileri doğrulamak: JSON.stringify() öncesinde veri tiplerini kontrol edin.
- Hata yönetimi: JSON.parse() kullanırken try...catch ile hataları yakalayın.
- Anlamlı isimlendirme: Anahtarlar ve değişkenler açıklayıcı olmalı.
-
Performans optimizasyonu: Gereksiz stringify/parse işlemlerinden kaçının.
Yaygın hatalar: -
Fonksiyon veya undefined tiplerini JSON’a eklemek.
- Sunucudan alınan veriyi doğrulamamak.
- Gereksiz dönüşümlerle uygulamayı yavaşlatmak.
- Parse hatalarını göz ardı etmek.
Hata ayıklama için console.log() veya JSONLint gibi araçlar kullanabilir, büyük JSON yapıları için testler yaparak bellek sızıntılarını önleyebilirsiniz.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| JSON.stringify() | Converts JavaScript object to JSON string | JSON.stringify({name:"Ali"}) |
| JSON.parse() | Converts JSON string to JavaScript object | JSON.parse('{"name":"Ali"}') |
| Array.forEach() | Iterates over array elements | arr.forEach(item=>console.log(item)) |
| try...catch | Handles errors during JSON parsing | try{JSON.parse(str)}catch(e){console.log(e)} |
| Object.keys() | Returns property names of an object | Object.keys({a:1,b:2}) // \["a","b"] |
Özet ve sonraki adımlar: JSON ile çalışma, web geliştirme sürecinde veri yönetimi için temel bir beceridir. Nesneleri ve dizileri oluşturmayı, parse ve stringify kullanmayı, iç içe yapılandırmaları ve hata yönetimini öğrendiniz. JSON, HTML DOM manipülasyonu ve backend iletişimi ile birlikte dinamik içerik güncellemelerini mümkün kılar; örneğin ürün listeleri, blog yazıları veya haber akışları.
Sonraki adımlar olarak Fetch API, AJAX ve büyük veri setlerinin optimizasyonunu inceleyebilirsiniz. Kendi projelerinizde JSON kullanarak bu bilgileri pekiştirmek, ileri düzeyde uygulamalar geliştirme yeteneğinizi artıracaktır.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek