JSON Verilerini JavaScript Kodları İle Nasıl Okuruz?JSON.stringify() ve JSON.parse() metotlarına detaylı olarak değinilecek.

JSON Verilerini JavaScript Kodları İle Nasıl Okuruz?JSON.stringify() ve JSON.parse() metotlarına detaylı olarak değinilecek.

JSON verileri, JavaScript kodları ile okurken JSONstringify ve JSONparse metodlarını kullanabilirsiniz Bu yöntemler sayesinde verilerinizi kolayca okuyabilir ve düzenleyebilirsiniz Detaylı bilgi için yazımızı okuyun!

JSON Verilerini JavaScript Kodları İle Nasıl Okuruz?JSON.stringify() ve JSON.parse() metotlarına detaylı olarak değinilecek.

JSON, JavaScript Object Notation kelimelerinin baş harflerinden oluşan bir veri yapısıdır. İnsanlar ve bilgisayarlar arasında veri alışverişinde kullanılan bir format olarak karşımıza çıkar. JSON, XML'den daha hafif bir veri yapısıdır ve okuması daha kolaydır. İnternet dünyasında çok kullanılmaktadır.

JSON yapısı iki ana öğeden oluşur: anahtar( key) ve değer (value). Anahtar belli bir veriyi tanımlar ve bir değer ile eşleştirilir. Örneğin,

Anahtar Değer
"name" "John"
"age" 26
"city" "Istanbul"

JSON veri yapısı, nesneler (objects), diziler (arrays), sayılar (numbers), metinler (strings), mantıksal değerler (true/false) ve null değerlerini destekler. Bu özellikleri sayesinde, farklı programlama dilleri ve teknolojiler arasında veri iletişimi yapmak için kullanılır.

Örneğin, bir web uygulamasında kullanıcının adını ve soyadını girerek kaydolması istenildiğinde, kullanıcının girdiği veriler JSON formatında sunucuya gönderilir. Sunucu verileri okur ve veritabanına kaydedebilir. Bu sayede, veri iletişimi daha hızlı ve güvenli hale gelir.

JSON verileri, çoğunlukla web uygulamalarında veri alışverişinde kullanılan bir veri yapısıdır. Bu veri yapısı, basit bir gösterimle JavaScript nesneleri gibi görünür ve kolayca okunabilir. Ancak, JavaScript kodları ile bu verilere erişmek için özel yöntemler kullanmak gerekmektedir.

JSON.stringify() metodu, JavaScript nesnelerini JSON biçiminde yazdırmak için kullanılır. Bu yöntem sayesinde, bir JavaScript nesnesi, JSON formatına dönüştürülebilir ve başka bir sistemde kullanılabilir hale getirilebilir. JSON.parse() metodu ise, JSON biçimindeki verileri JavaScript nesnesine dönüştürmek için kullanılır. Bu yöntem sayesinde, bir JSON dosyası veya metin içeriği, JavaScript kodları ile okunabilir hale getirilebilir.

Metot Adı Parametreler Açıklama
JSON.stringify() veri nesnesi, replacer, boşluk sayısı Veri nesnesini JSON biçiminde yazdırır.
JSON.parse() JSON metin JSON biçimindeki verileri JavaScript nesnesine dönüştürür.

Örneğin, bir veritabanından alınan veriler JSON formatında bir dosyaya yazdırıldıysa, bu dosya JSON.parse() metodu ile kolayca JavaScript nesnesine dönüştürülebilir ve web uygulamasında kullanılabilir.

  • JSON.stringify() metodu ile oluşturulan JSON verisi, daha sonra JavaScript kodları ile okunabilir hale getirilebilir.
  • JSON.parse() metodu ile JSON formatındaki bir metnin içeriği, JavaScript nesnesine dönüştürülebilir ve web uygulamasında kullanılabilir.

JSON verilerini JavaScript kodları ile okumak kolay olsa da, doğru yöntemleri kullanmak oldukça önemlidir. JSON.stringify() ve JSON.parse() metotları kullanarak, JSON verilerini kolayca işleyebilir ve web uygulamalarında veri alışverişini sağlayabilirsiniz.


JSON.stringify() Metodu

JSON.stringify() yöntemi, veri nesnelerini JSON biçiminde yazdırmak için kullanılır.

JSON.stringify() metodu, JavaScript nesnelerini JSON biçiminde yazdırmak için kullanılır ve bir nesneyi JSON biçimindeki dizeye dönüştürür. Bu metot, özelliklerin belirli bir sırayla gösterilmesini veya bir nesneye dönüştürülmesini sağlar.

JSON.stringify() metodu, üç parametre alabilir. İlk parametre, dönüştürecek nesnedir. İkinci parametre, seçenekleri belirlemek için kullanılır. Üçüncü parametre, JSON çıktısının girileceği boşluğun sayısını gösterir.

Bir örnek üzerinden anlatmak gerekirse:

JavaScript Kodları JSON Çıktısı
var kitap = {
    "yazar": "Orhan Pamuk",
    "eser": "Kar",
    "yayınevi": "İletişim Yayınları"
};
var jsonKitap = JSON.stringify(kitap);
console.log(jsonKitap);
{
    "yazar": "Orhan Pamuk",
    "eser": "Kar",
    "yayınevi": "İletişim Yayınları"
}

JSON.stringify() metodu ile belirtilen nesne JSON biçiminde dönüştürülerek, console.log() metoduyla konsola "jsonKitap" adı altında yazdırılır. Bu sayede, girintili bir şekilde JSON dosyasının yazdırılması sağlanır.


JSON.parse() Metodu

JSON.parse() metodu kullanıcıdan bir veri girdisi alır ve onu JSON biçiminden JavaScript nesnesine dönüştürür.

JSON.parse() metodu, kullanıcının giridiği veriyi JSON biçiminden JavaScript nesnesine dönüştüren bir metoddur. Bu metot sayesinde, JSON verileri JavaScript nesnelerine dönüştürülebilir ve bu nesneler üzerinde işlemler yapılabilir.

JSON.parse() metodu, aşağıdaki gibi kullanılabilir:

```var jsonVeri = '{"name": "John", "age": 30, "city": "New York"}';var obj = JSON.parse(jsonVeri);```

Bu örnekte, "jsonVeri" adlı değişkene bir JSON nesnesi atanır. Daha sonra, JSON.parse() metodu kullanılarak bu nesne JavaScript nesnesine dönüştürülür ve "obj" adlı değişkene atanır.

JSON.parse() metodu ayrıca ikinci bir parametre olarak reviver fonksiyonu alabilir. Reviver fonksiyonu, JSON nesnesinin her bir elemanına uygulanır ve bu elemanlar düzenlenebilir. Örneğin, aşağıdaki kodda "date" adlı öğe, reviver fonksiyonu kullanılarak tarih nesnesine dönüştürülmektedir:

```var jsonVeri = '{"name": "John", "age": 30, "city": "New York", "date": "2022-08-19T11:43:14.444Z"}';

var obj = JSON.parse(jsonVeri, function(key, value) { if (key == "date") { return new Date(value); } else { return value; }});```

Bu örnekte, "jsonVeri" adlı değişkene atanmış olan JSON nesnesinde, "date" adlı öğe bir tarih nesnesi olarak kullanılmak istenmiştir. Bunun için, JSON.parse() metodu ikinci bir parametre olarak bir fonksiyon alır. Bu fonksiyon, JSON nesnesindeki her bir öğeyi tek tek işleyerek, verileri düzenler. "date" adlı öğe, "new Date(value)" koduyla tarih nesnesine dönüştürülür.


Örnek Kodlama

JSON.stringify() ve JSON.parse() metotları kullanılarak örnek kodlamalar yapılacak.

Bir veri nesnesinin JSON biçiminde yazdırılması veya bir JSON verinin bir JavaScript nesnesine dönüştürülmesi gibi işlemler, JSON.stringify() ve JSON.parse() metotları ile kolayca gerçekleştirilebilir. Örneğin,

Örnek Veri Nesnesi JSON.stringify() Kullanımı JSON.parse() Kullanımı
{"ad":"John", "yaş":30, "şehir":"İstanbul"} JSON.stringify(veriNesnesi) JSON.parse(JSON_veri)

Bu örnek veri nesnesi, JSON.stringify() metodu kullanılarak JSON biçimine dönüştürülebilir ve aynı şekilde JSON.parse() metodu kullanılarak tekrar JavaScript nesnesine dönüştürülebilir.

Bir başka örnek veri nesnesi ise şu şekildedir:

  • Ad: "Ahmet"
  • Soyad: "Yılmaz"
  • Yaş: 35
  • E-posta: "ahmetyilmaz@example.com"

Bu veri nesnesi, JSON.stringify() metodu ile şu şekilde JSON biçimine dönüştürülebilir:

 {"ad":"Ahmet", "soyad":"Yılmaz", "yaş":35, "e-posta":"ahmetyilmaz@example.com"}

Bu JSON verisi daha sonra JSON.parse() metodu kullanılarak tekrar JavaScript nesnesine dönüştürülebilir ve veriler kullanılabilir hale gelebilir.

JSON verilerinin işlenmesi sırasında önemli olan, veri yapısının doğru biçimde kullanılmasıdır. JSON verilerinin okunması ve kullanılması işlemleri için gerekli kodlama teknikleri, JSON.stringify() ve JSON.parse() metotları sayesinde kolayca gerçekleştirilebilir.


Uygulama

Bir örnek uygulama geliştirilerek JSON verilerinin okunması gösterilecek.

JSON verilerinin nasıl kullanılabileceği pratiğe dökülebilir bir örnek olarak aşağıdaki uygulama yapılabilir. Bu uygulama ile JSON verilerinin nasıl okunup kullanılacağı örnekler ile anlatılabilir.

Örnek uygulama şu şekilde yapılabilir:

  • Adım 1: Öncelikle, bir JSON veri dosyası oluşturulur ve bir adrese kaydedilir. Bu veri dosyası, içinde kişilerin ad, soyad, yaş ve meslek gibi verilere sahip olabilir.
  • Adım 2: HTML sayfası oluşturulur ve bir buton eklenir.
  • Adım 3: JavaScript kodları ile butona bir tıklama fonksiyonu atanır. Bu fonksiyon, JSON verilerini çekmek için Ajax kullanarak JSON dosyasına erişir.
  • Adım 4: Veriler çekildikten sonra, bunlar JavaScript nesnelerine dönüştürülebilir ve ekranda gösterilebilir. Örneğin, bir tablo kullanılabilir.

Bu örnek uygulama, JSON verilerinin nasıl okunup kullanılacağını pratikte göstermek için faydalı olabilir.


JSON Dosyalarının Okunması

Bir JSON dosyasının okunması ve verilerin kullanılması ele alınacak.

JSON dosyaları, internetteki yüz binlerce verinin depolanmasında önemli bir role sahip olduğu için onları okumak ve verileri anlamak birçok durumda önemlidir. Bir JSON dosyası, temel olarak bir metin belgesidir ve genellikle .json uzantısıyla kaydedilir. JSON verilerini okumak ve kullanmak için birçok yöntem vardır.

File API, javascript tarafından bir dosyanın okunmasına izin veren bir api'dır. Bu API, kullanıcıların bilgisayarlarından doğrudan bir JSON dosyası yüklemelerini sağlar. Bir örnek olarak, aşağıdaki kod kullanıcıdan bir dosya seçerek, dosya okuma işlemlerini gerçekleştirir:

<input type="file" onchange="loadFile(event)"><script>function loadFile(event) {  var input = event.target;  var reader = new FileReader();  reader.onload = function(){    var text = reader.result;    var obj = JSON.parse(text);    console.log(obj);  };  reader.readAsText(input.files[0]);};</script>

Yukarıdaki örnekte, kullanıcıdan bir dosya seçmek için bir <input type="file"> etiketi kullanılmaktadır. İşlem, kullanıcı bir dosya seçtiğinde, loadFile fonksiyonunu tetikler. Fonksiyon, okuma işlemini gerçekleştirir ve verileri konsol üzerinde görüntüler.

Ajax, Asenkron JavaScript ve XML anlamına gelir. Ajax, kullanıcının etkileşimli uygulamalar yapmalarını ve sunucudan veri alarak sayfaları yenilemeden dinamik olarak güncellemelerini sağlar. JSON verileri, HTTP isteklerinden sonra karşıdan yüklenir ve web sayfasının içine gömülür. Aşağıdaki örnekte, jQuery Ajax kullanarak bir JSON dosyasının okunması gösterilmektedir:

$.ajax({  url: 'veriler.json',  dataType: 'json',  type: 'get',  cache: false,  success: function(data) {    $.each(data, function(index, value) {      console.log(value);    });  }});

Yukarıdaki örnekte, url özelliği, Ajax isteğinin gideceği adresi belirtir. dataType özelliği, yanıtın veri türünü belirtir ve bu durumda bir JSON dosyasıdır. İsteğin türü type özelliği kullanılarak "get" olarak ayarlanır. Son olarak, istek tamamlandığında, işlev verileri okur ve konsol üzerinde görüntüler.


File API Kullanımı

File API kullanılarak JSON dosyasının okunması ve içeriğinin listelenmesi yapılacaktır.

File API, web tarayıcının yerel dosya sistemine erişmesini sağlayan bir JavaScript API'dir. Bu sayede web uygulamaları, kullanıcının bilgisayarında bulunan dosyalara erişebilir. Bu API'yi kullanarak bir JSON dosyasını okuyabiliriz.

İlk olarak, HTML sayfası içerisinde bir dosya yükleyici eklememiz gerekiyor. Bunun için etiketini kullanabiliriz. Bu etikete multiple özelliğini eklerseniz, aynı anda birden fazla dosya seçebilirsiniz. Şöyle bir kod bloğu oluşturabilirsiniz:

            <input type="file" id="fileInput" multiple>    

Daha sonra, JavaScript kodu içerisinde bu dosyayı okuyabiliriz. İlk önce dosyayı seçmemiz gerekiyor. Bunun için document.getElementById() metodunu kullanabiliriz:

            const fileInput = document.getElementById('fileInput');        const file = fileInput.files[0];    

Dosya seçimi yapıldıktan sonra, FileReader nesnesi kullanarak dosyayı okuyabiliriz. Şöyle bir kod bloğu oluşturabiliriz:

            const reader = new FileReader();        reader.readAsText(file);        reader.onload = function() {            const result = reader.result;            const data = JSON.parse(result);            console.log(data);        }    

Bu kod bloğunda, FileReader nesnesinin readAsText() metodunu kullanarak dosyayı okuyoruz. Sonrasında, onload fonksiyonu içerisinde dosya içeriğini JSON.parse() metoduyla JavaScript nesnesine dönüştürerek kullanabiliyoruz.


Ajax Kullanımı

Ajax kullanarak JSON dosyasının okunması ve içeriğinin kullanılması işlenecektir.

JSON verilerini okumak ve kullanmak için Ajax kullanmak oldukça yaygın bir yöntemdir. Ajax ile bir JSON dosyasından veri okumak için öncelikle XMLHttpRequest nesnesini kullanarak bir istek göndermek ve ardından gelen verileri işlemek gerekir.

İlk adım olarak XMLHttpRequest nesnesi oluşturulur ve istek gönderilir. Ardından, gelen veriler JSON.parse() metodu kullanılarak JavaScript nesnesine dönüştürülür. Dönüştürülen veriler daha sonra kullanıcı tarafından istenilen şekilde işlenebilir.

Örneğin, bir web uygulaması için belirli bir JSON dosyasından verileri alıp, kullanıcıya göstermek istiyoruz. Bu işlem için Ajax kullanabiliriz. Önce XMLHttpRequest nesnesi oluşturulur ve ardından JSON dosyasından veri almak için bir istek gönderilir. Gelen veriler JSON.parse() metodu kullanılarak JavaScript nesnesine dönüştürülür. Daha sonra bu veriler, HTML tabloları veya listeleri oluşturmak için kullanılabilir. Kullanıcı, oluşturulan tablolar veya listeler aracılığıyla verileri görüntüleyebilir.

Ajax kullanımı ile bir JSON dosyasının okunması ve içeriğinin kullanılması oldukça basittir. Bu yöntem sayesinde verilerin internet üzerinden dinamik olarak kullanılması mümkündür.