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
API’den gelen verileri ekrana yazdırmak için fetch() ile isteği gönderin, yanıtın durumunu kontrol edin, JSON verisini JavaScript nesnesine dönüştürün ve istediğiniz alanları sayfadaki HTML öğelerine yerleştirin. Aşağıdaki örnek önce yerel bir JSON dosyasıyla çalışır; ardından aynı kodu uygun yapıdaki bir API yanıtına uyarlayabilirsiniz.

Veriyi alıp sayfada gösterin​


Örnekte yanıtın, her ürün için ad alanı içeren bir dizi olduğu varsayılıyor. Denemek için aynı klasörde önce urunler.json adlı dosyayı oluşturup şu içeriği kaydedin:

JSON: 
[
  { "ad": "Klavye" },
  { "ad": "Fare" }
]

Ardından aynı klasörde index.html dosyasını oluşturun ve aşağıdaki kodu kaydedin:

HTML: 
<!doctype html>
<html lang="tr">
<head>
  <meta charset="utf-8">
  <title>Ürünler</title>
</head>
<body>
  <h1>Ürünler</h1>
  <p id="durum" role="status">Yükleniyor...</p>
  <ul id="urun-listesi"></ul>

  <script>
    const durum = document.querySelector('#durum');
    const liste = document.querySelector('#urun-listesi');

    async function urunleriGoster() {
      try {
        const yanit = await fetch('urunler.json');

        if (!yanit.ok) {
          throw new Error(`HTTP ${yanit.status}`);
        }

        const urunler = await yanit.json();
        if (!Array.isArray(urunler)) {
          throw new Error('Beklenen ürün dizisi alınamadı.');
        }

        liste.replaceChildren();
        if (urunler.length === 0) {
          durum.textContent = 'Gösterilecek ürün yok.';
          return;
        }

        for (const urun of urunler) {
          const satir = document.createElement('li');
          satir.textContent = urun.ad ?? 'Adsız ürün';
          liste.appendChild(satir);
        }
        durum.textContent = `${urunler.length} ürün gösteriliyor.`;
      } catch (hata) {
        durum.textContent = 'Ürünler yüklenemedi. Konsoldaki hatayı inceleyin.';
        console.error('Ürünler yüklenemedi:', hata);
      }
    }

    urunleriGoster();
  </script>
</body>
</html>

Dosyaları doğrudan açmak yerine yerel bir web sunucusuyla çalıştırın. Örneğin Python yüklüyse terminalde bu iki dosyanın bulunduğu klasöre geçip şu komutu çalıştırın:

Kod: 
python -m http.server 8000

Tarayıcıda http://localhost:8000/ adresini açın. Liste altında “Klavye” ve “Fare”, durum alanında ise “2 ürün gösteriliyor.” görünmelidir. Bu deneme gerçek bir API sunucusu değil, aynı biçimde yanıt veren yerel bir dosya kullanır. İşiniz bittiğinde terminalde Ctrl+C ile sunucuyu durdurabilirsiniz.

Örneği kendi API’nize uyarlayın​


fetch('urunler.json') içindeki yolu API’nizin veri adresiyle değiştirin. API belgelerinden istek yöntemini, gerekiyorsa kimlik doğrulamasını ve dönen JSON’un yapısını öğrenin. Bu örnek, ek kimlik doğrulaması gerektirmeyen bir GET isteği kullanır.

await, isteğin ve JSON ayrıştırmasının tamamlanmasını bekler. yanit.ok, HTTP durumunun başarılı aralıkta olup olmadığını gösterir; ancak verinin mutlaka beklenen yapıda olduğunu kanıtlamaz. Bu nedenle örnek ayrıca yanıtın dizi olup olmadığını kontrol eder.

API doğrudan dizi yerine { "urunler": [...] } biçiminde bir nesne döndürüyorsa, const urunler = await yanit.json(); satırını şu iki satırla değiştirin:

JavaScript: 
const veri = await yanit.json();
const urunler = veri.urunler;

Ürün adı farklı bir alandaysa urun.ad ifadesini de yanıtınızdaki alan adıyla değiştirin. Dizi boşsa “Gösterilecek ürün yok.” mesajı görünür; bu durum isteğin başarısız olduğu anlamına gelmez. Alan eksikse örnek “Adsız ürün” yazar; bu durumda alan adını ve yanıt yapısını karşılaştırın.

Gizli API anahtarlarını tarayıcıya gönderilen JavaScript’e koymayın. Gizli anahtar gerektiren istekleri kendi sunucunuz üzerinden yapmak ve tarayıcıya yalnız gerekli veriyi göndermek daha uygundur. Örnekte textContent kullanılması da ürün adlarının HTML olarak yorumlanmasını önler; güvenilmeyen verileri doğrudan innerHTML içine yerleştirmeyin.

Veri görünmüyorsa​


Tarayıcının geliştirici araçlarında konsolu ve ağ isteklerini açın. İsteğin adresini, durum kodunu ve yanıt biçimini inceleyin. 404 genellikle yolun bulunamadığını gösterir; dosya adını veya API adresini düzeltin. 401 ya da 403 alırsanız API’nin kimlik doğrulama ve yetki koşullarını inceleyin. HTTP yanıtı başarılı olsa bile JSON ayrıştırma hatası alıyorsanız yanıtın gerçekten geçerli JSON olup olmadığını kontrol edin.

Konsolda CORS hatası varsa, farklı bir kaynaktan yapılan isteğin yanıtına tarayıcı erişimi engellenmiş olabilir. API sunucusu kontrolünüzdeyse kendi sitenizin kaynağına uygun CORS iznini yapılandırın; değilse sağlayıcıdan izin koşullarını öğrenin veya isteği kontrol ettiğiniz sunucu üzerinden yapın. no-cors kullanmak okunabilir bir JSON yanıtı sağlamaz. Tanılama sırasında anahtarları, oturum bilgilerini veya özel yanıt verilerini paylaşmayın; eklediğiniz geçici ayrıntılı konsol çıktılarını iş bitince kaldırın.
 

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)