Emre

Emre

WFN Üye
Konular
1,662
Mesajlar
1,758
Çözüm
0
Ticaret Puanı
0
Üyelik
9 Ay 4 Gün
Konum
Samsun
Web Sitesi
Var
Alanı
WordPress Uzm.
1/1
Konu sahibi
JSON dosyasını JavaScript’te okumak için tarayıcıda genellikle fetch(), Node.js’te ise fs modülü kullanılır. Tarayıcı örneğinde dosyanın yolunu fetch() ile alıp response.json() sonucunu bekleyerek nesneye dönüştürürsünüz. Dosya başarıyla okunursa JSON içindeki alanlara JavaScript nesnesi gibi erişebilirsiniz; dosya bulunamazsa, geçersiz JSON içeriyorsa veya tarayıcı güvenlik kuralları engel olursa hata oluşur.

Tarayıcıda JSON dosyası okuma​


Örneğin aynı klasörde veriler.json adlı şu dosyanın bulunduğunu varsayalım:

JSON: 
{
  "urun": "Klavye",
  "fiyat": 750,
  "stokta": true
}

Bu dosyayı bir HTML sayfasındaki JavaScript kodundan okumak için dosya yolunu fetch() ile belirtin:

HTML: 
<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>JSON okuma örneği</title>
</head>
<body>
  <p id="sonuc">Veriler yükleniyor...</p>

  <script>
    fetch("veriler.json")
      .then(response => {
        if (!response.ok) {
          throw new Error(`Dosya okunamadı: HTTP ${response.status}`);
        }

        return response.json();
      })
      .then(veri => {
        document.querySelector("#sonuc").textContent =
          `${veri.urun} - ${veri.fiyat} TL - Stokta: ${veri.stokta ? "Evet" : "Hayır"}`;
      })
      .catch(hata => {
        console.error(hata);
        document.querySelector("#sonuc").textContent =
          "JSON dosyası okunamadı.";
      });
  </script>
</body>
</html>

Kodda ilk .then() bloğu HTTP yanıtını kontrol eder. response.ok değeri başarısızsa hata fırlatılır; çünkü fetch() bazı HTTP hatalarında kendiliğinden reddedilmeyebilir. Yanıt başarılıysa response.json() JSON metnini JavaScript nesnesine dönüştürür. İkinci .then() bloğunda artık veri.urun, veri.fiyat ve veri.stokta gibi alanlara erişebilirsiniz.

Bu örneğin çalışması için index.html ve veriler.json dosyalarını aynı klasöre koyun. HTML dosyasını doğrudan file:// adresiyle açmak yerine yerel bir HTTP sunucusu üzerinden çalıştırın. Örneğin kullandığınız geliştirme aracının yerel sunucusunu başlatabilir veya projenin klasöründe basit bir HTTP sunucusu kullanabilirsiniz. Tarayıcıda HTML sayfası açıldığında beklenen sonuç Klavye - 750 TL - Stokta: Evet olacaktır.

async/await ile daha okunabilir kullanım​


Aynı işlem async/await ile daha doğrusal biçimde yazılabilir:

JavaScript: 
async function jsonOku() {
  try {
    const response = await fetch("veriler.json");

    if (!response.ok) {
      throw new Error(`Dosya okunamadı: HTTP ${response.status}`);
    }

    const veri = await response.json();

    console.log(veri.urun);
    console.log(veri.fiyat);
  } catch (hata) {
    console.error("JSON okuma hatası:", hata.message);
  }
}

jsonOku();

await response.json() satırı, JSON içeriğinin ayrıştırılmasını bekler. Bu aşamada hata oluşması dosyanın bulunamadığını değil, dosyanın geçerli JSON biçiminde olmayabileceğini de gösterebilir. JSON içinde JavaScript’teki gibi yorum satırı kullanmayın; alan adlarını çift tırnakla yazın ve son alandan sonra gereksiz virgül bırakmayın.

Node.js’te JSON dosyası okuma​


Node.js tarafında JSON dosyasını dosya sisteminden okumak için node:fs/promises modülünü kullanabilirsiniz. Aşağıdaki örnekte veriler.json dosyası, JavaScript dosyasıyla aynı klasörde kabul edilmiştir:

JavaScript: 
const { readFile } = require("node:fs/promises");

async function jsonOku() {
  try {
    const metin = await readFile("./veriler.json", "utf8");
    const veri = JSON.parse(metin);

    console.log(veri.urun);
    console.log(veri.fiyat);
  } catch (hata) {
    console.error("JSON okuma hatası:", hata.message);
  }
}

jsonOku();

Burada readFile() dosyanın metin içeriğini okur, JSON.parse() ise bu metni JavaScript nesnesine dönüştürür. ENOENT benzeri bir hata dosya yolunun yanlış olduğunu veya dosyanın bulunmadığını gösterir. JSON.parse() hatası alırsanız dosyanın içeriğinde JSON sözdizimi hatası vardır; dosyayı kontrol edip eksik çift tırnak, kapanmayan süslü parantez ve hatalı virgül gibi sorunları düzeltin.

Dosyanın başka bir klasöre taşınması durumunda göreli yol, Node.js sürecinin çalıştırıldığı klasöre göre beklenmedik sonuç verebilir. Bu nedenle yolun gerçekten hangi klasörden çözümlendiğini kontrol edin veya uygulamanızın dosya yolu yapısına uygun mutlak/oluşturulmuş bir yol kullanın. JSON dosyası kullanıcıdan geliyorsa içeriği güvenilir kabul etmeyin; ayrıştırmadan sonra beklenen alanların türlerini ve bulunup bulunmadığını ayrıca doğrulayın.

Hangi yöntemi kullanmalısınız?​

Çalışma ortamıYöntemSonuç
Tarayıcıfetch() ardından response.json()Sunucudan veya aynı web uygulamasından JSON alınır.
Node.jsreadFile() ardından JSON.parse()Yerel dosya sistemi üzerindeki JSON okunur.
Zaten bir JSON metniniz varsaJSON.parse(metin)Metin JavaScript nesnesine çevrilir.
Bu ayrım önemlidir: Tarayıcıdaki JavaScript, kullanıcının bilgisayarındaki herhangi bir dosyayı doğrudan okuyamaz; dosyanın web uygulaması tarafından sunulması veya kullanıcının açıkça dosya seçmesi gerekir. Node.js ise sunucu sürecinin erişebildiği dosyaları okuyabilir. JSON’un okunması yalnızca veriyi ayrıştırır; verinin beklenen yapıda, güvenilir veya uygulama açısından geçerli olduğunu kendiliğinden kanıtlamaz.

JSON metni zaten bir değişkende bulunuyorsa​


Dosya okumaya gerek yoksa yalnızca metni ayrıştırabilirsiniz:

JavaScript: 
const metin = '{"ad":"Ayşe","yas":28}';
const kisi = JSON.parse(metin);

console.log(kisi.ad);  // Ayşe
console.log(kisi.yas); // 28

Bu kodun girdisi geçerli bir JSON metnidir ve çıktısı JavaScript nesnesidir. Metin geçersizse JSON.parse() hata verir; bu durumda metni düzeltmeden alanlara erişmeye çalışmak yerine try...catch ile hatayı yakalayıp kaynağı kontrol etmelisiniz.
 

Sende şimdi bize katılmak ister misin?

Kayıt ol

Bize katılım kolay ve ücretsizdir!

Üye ol
Foruma git ?

Bu konuyu görüntüleyen kullanıcılar

Bu konuyu şu anda görüntüleyen üye bulunmuyor.
Robotlar:
  • Anthropic
Toplam: 1 (Üye: 0, misafir: 0, robot: 1)