Connect with us

Hi, what are you looking for?

Javascript

Javascript ile JSON Veri Çekme

Javascript Dersleri
Javascript Dersleri

Dünyanın en popüler programlama dillerinden Javascript, modern web teknolojilerinin en gözdesi. Peki Javascript ile json dosyasından veri nasıl çekeriz? Siberdefter Eğitim kaldığı yerden devam ediyor arkadaşlar.

Bu işlemi size basit bir örnekle göstermek istiyorum. Öncelikle “client” id değerine sahip bir paragraf oluşturuyorum.

Adım 1: Kullanıcı tarafını hazırlayalım

<p id="client"></p>

Kafamdaki senaryoda “client” idsi taşıyan bir paragrafım var ben buraya jSON dosyamdan aldığım veriyi işleyeceğim ve kullanıcıya anlamlı bir şey sunacağım.

Adım 2: Javascript ile JSON verimizi çekelim

Javascript’in bize sunduğu velinimetlerden olan “fetch()” fonksiyonu ile örnek bir API’ye bağlanacağız ve JSON dosyamızı çekeceğiz, ardından dosyamdaki veriyi işleyeceğim ve HTML tarafındaki kutucuğuma yerleştireceğim.

    let url = 'https://api.mocki.io/v1/b043df5a';
    let client = document.getElementById('client');

    fetch(url)
    .then(res => res.json())
    .then((out) => {
        out.forEach(element => {
            client.innerHTML = element.name + '&nbsp;from&nbsp;' + element.city;
        });
    })
    .catch(err => { throw err });

İlk etapta “client” ve “url” isminde iki değişken oluşturdum, url isimli değişkenim API linkini barındırıyor, client değişkenim ise HTML bloğumu. fetch fonksiyonuma url değişkenimi veriyorum ve “then()” fonksiyonlarımı bağlıyorum.

then() bağlantı başarılı olduğu zaman yaptıracağım işlemlerden bir tanesi, bana gelen cevap (response / res) json() fonksiyonu ile işleniyor ve bir sonraki then() ile birlikte de gelen değerlerini out ile alıyorum.

forEach ile döngüye sokup client’ın içeriğine verilerimi basıyorum arkadaşlar. JSON dosyamda şehir ve insan ismi yazdığından ötürü “X from X’den” şeklinde bir işleme yaptım.

Advertisement. Scroll to continue reading.
Written By

Siberdefter'de Chief Executive Officer

Click to comment

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Editörün Tavsiyeleri

Javascript

Herhangi bir web sitesine girdiğimiz zaman çoğu zaman sitelerin bizden bildirim göndermek için izin istediğini görürüz. Bizde web sitemize bu özelliği entegre etmek istediğimiz...

Javascript

Web sayfanız her açıldığında kullanıcıya rastgele renkler sunmak mı istiyorsunuz? Javascript ile Rastgele Renkler oluşturmak mümkün hem de iki satırlık kod ile. İlk etapta...

Javascript

Merhaba Siberdefter takipçileri, Javascript derslerimize devam ediyoruz ve bugün Javascript projelerimizde kullandığımız dizilerin (array) içerisinde herhangi bir içerik olmayan boş elemanları nasıl temizleyeceğimizi öğreneceğiz....

Javascript

Günümüzde hemen hemen her şey REST API’ler, JSON dosyalar, NoSQL teknolojileri ile işliyor. Hatta durum öyle ki gündemimizi meşgul eden Koronavirüs (COVID-19) verileri hakkında...

Advertisement
Advertisement