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 + ' from ' + 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.
