JavaScript Ile JSON Veri Çekmek - Tasarım Kodlama

Trang chủ » Html Ile Xml Den Veri çekme » JavaScript Ile JSON Veri Çekmek - Tasarım Kodlama

Có thể bạn quan tâm

Bu yazıda artık webde standart haline gelen JSON biçimini kullanarak veri çekmeyi göstereceğim. JSON, XML gibi bir veri işaretleme biçimidir. JSON‘u popüler kılan şey, JavaScript dili ile doğal olan uyumudur. Bu yazıda da javascript ile nasıl rahatlıkla kullanıldığını göreceksiniz.

Bakınız: JSON Nedir? Nasıl Kullanılır?

Adım 1: Öncelikli olarak basit bir HTML formu oluşturalım. Formda tıklandığında verileri çekmek için bir tane buton ve verileri göstermek için bir tane tablo oluşturuyoruz. Sayfanın biçimli durması içinde BOOTSTRAP 4 kullanıyoruz.

<!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Title </title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col"> <button class="btn btn-primary" id="veri-oku">Veri Çek</button> </div> </div> <div class="row"> <div class="col"> <table class="table"> <thead> <tr> <th>#ID</th> <th>Ad</th> <th>Soyad</th> </tr> </thead> <tbody id="liste"> <tr> <th scope="row">1</th> <td>Ali</td> <td>Bak</td> </tr> </tbody> </table> </div> </div> </div> </body> </html>
12345678910111213141516171819202122232425262728293031323334353637383940414243 <!DOCTYPE html><html lang="tr"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible"content="ie=edge"><title> Title </title><link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous"></head> <body><div class="container"><div class="row"><div class="col"><button class="btn btn-primary"id="veri-oku">Veri Çek</button></div></div><div class="row"><div class="col"><table class="table"><thead><tr><th>#ID</th><th>Ad</th><th>Soyad</th></tr></thead><tbody id="liste"><tr><th scope="row">1</th><td>Ali</td><td>Bak</td></tr></tbody></table></div></div></div></body></html>

Örnekte kullandığımız dosya.json dosyayı da aşağıdaki gibidir.

[ { "id": "1", "ad": "Kayıtbay", "soyad": "Çılgın" }, { "id": "2", "ad": "Bukra", "soyad": "Porgalı" }, { "id": "3", "ad": "Ilgım", "soyad": "Porgalı" }, { "id": "4", "ad": "Şarani", "soyad": "Anşın ersönmez" }, { "id": "5", "ad": "Müstenire", "soyad": "Kadıoğlu" }, { "id": "6", "ad": "Benazir", "soyad": "Matçiçek" }, { "id": "7", "ad": "Sulbi", "soyad": "Aksoy" }, { "id": "8", "ad": "Celasun", "soyad": "Dönerkaya" }, { "id": "9", "ad": "Zahrettin", "soyad": "Uyan" }, { "id": "10", "ad": "Ulus", "soyad": "Erguvan" } ]
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354 [{"id":"1","ad":"Kayıtbay","soyad":"Çılgın"},{"id":"2","ad":"Bukra","soyad":"Porgalı"},{"id":"3","ad":"Ilgım","soyad":"Porgalı"},{"id":"4","ad":"Şarani","soyad":"Anşın ersönmez"},{"id":"5","ad":"Müstenire","soyad":"Kadıoğlu"},{"id":"6","ad":"Benazir","soyad":"Matçiçek"},{"id":"7","ad":"Sulbi","soyad":"Aksoy"},{"id":"8","ad":"Celasun","soyad":"Dönerkaya"},{"id":"9","ad":"Zahrettin","soyad":"Uyan"},{"id":"10","ad":"Ulus","soyad":"Erguvan"}]

Bakınız: 10 Dakikada JSON Öğren

Adım 2: Sıra geldi verileri çekmek için kullanacağımız JavaScript yöntemini kullanmaya. JavaScriptte verileri asenkron çekmek için çok fazla yöntem olmasına rağmen günümüzde popüler olarak kullanılan fetch fonksiyonudur.

Fetch Yöntemi:

Getirme API’si, HTTP ardışık düzeninin istekler ve yanıtlar gibi bölümlerine erişmek ve bunları yönetmek için bir JavaScript arabirimi sağlar. Ayrıca, kaynakları ağ üzerinden eşzamansız olarak getirmenin kolay ve mantıklı bir yolunu sağlayan genel bir fetch() yöntemi de sağlar.

Bu tür bir işlevsellik daha önce XMLHttpRequest kullanılarak elde ediliyordu. Getirme, Hizmet Çalışanları gibi diğer teknolojiler tarafından kolayca kullanılabilecek daha iyi bir alternatif sağlar. Getirme ayrıca, CORS ve HTTP uzantıları gibi HTTP ile ilgili diğer kavramları tanımlamak için tek bir mantıksal yer sağlar.

Örnek kullanım:

fetch('.dosya.json') .then(cevap => cevap.json()) .then(veri => console.log(veri));
12345 fetch('.dosya.json').then(cevap=>cevap.json()).then(veri=>console.log(veri));

Adım 3: Butona tıklayınca verileri console ekranında çekelim.

<script> const btnCek=document.querySelector("#veri-oku"); btnCek.addEventListener("click",function(){ fetch('./dosya.json') .then(cevap => cevap.json()) .then(veri => console.log(veri)); }); </script>
12345678910 <script>constbtnCek=document.querySelector("#veri-oku");btnCek.addEventListener("click",function(){fetch('./dosya.json').then(cevap=>cevap.json()).then(veri=>console.log(veri));});</script>

Console Çıktısı:

Adım 4 : Şimdi sıra geldi butona verileri çektikten sonra tablo satırlarını oluşturup tabloya eklemeye

<script> const btnCek=document.querySelector("#veri-oku"); const tbListe=document.querySelector("#liste"); btnCek.addEventListener("click",function(){ fetch('./dosya.json') .then(cevap => cevap.json()) .then(veri => { tbListe.innerHTML="";//tabloyu boşalt veri.forEach(function(element,index){ const satir = document.createElement("tr"); const hucre1 = document.createElement("td"); const hucre2 = document.createElement("td"); const hucre3 = document.createElement("td"); hucre1.textContent=element.id hucre2.textContent=element.ad hucre3.textContent=element.soyad satir.appendChild(hucre1) satir.appendChild(hucre2) satir.appendChild(hucre3) tbListe.appendChild(satir) }); }); }); </script>
1234567891011121314151617181920212223242526272829303132 <script>constbtnCek=document.querySelector("#veri-oku");consttbListe=document.querySelector("#liste");btnCek.addEventListener("click",function(){fetch('./dosya.json').then(cevap=>cevap.json()).then(veri=>{tbListe.innerHTML="";//tabloyu boşaltveri.forEach(function(element,index){constsatir=document.createElement("tr");consthucre1=document.createElement("td");consthucre2=document.createElement("td");consthucre3=document.createElement("td");hucre1.textContent=element.idhucre2.textContent=element.adhucre3.textContent=element.soyadsatir.appendChild(hucre1)satir.appendChild(hucre2)satir.appendChild(hucre3)tbListe.appendChild(satir)});});});</script>

Ekran Çıktısı:

Adım5: Sayfadaki kodları birleştirecek olursa aşağıdaki gibi oluşacaktır. <!DOCTYPE html> <html lang="tr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> Title </title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> </head> <body> <div class="container"> <div class="row"> <div class="col"> <button class="btn btn-primary" id="veri-oku">Veri Çek</button> </div> </div> <div class="row"> <div class="col"> <table class="table"> <thead> <tr> <th>#ID</th> <th>Ad</th> <th>Soyad</th> </tr> </thead> <tbody id="liste"> <tr> <th scope="row">1</th> <td>Ali</td> <td>Bak</td> </tr> </tbody> </table> </div> </div> </div> <script> const btnCek=document.querySelector("#veri-oku"); const tbListe=document.querySelector("#liste"); btnCek.addEventListener("click",function(){ fetch('./dosya.json') .then(cevap => cevap.json()) .then(veri => { tbListe.innerHTML="";//tabloyu boşalt veri.forEach(function(element,index){ const satir = document.createElement("tr"); const hucre1 = document.createElement("td"); const hucre2 = document.createElement("td"); const hucre3 = document.createElement("td"); hucre1.textContent=element.id hucre2.textContent=element.ad hucre3.textContent=element.soyad satir.appendChild(hucre1) satir.appendChild(hucre2) satir.appendChild(hucre3) tbListe.appendChild(satir) }); }); }); </script> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 <!DOCTYPE html><html lang="tr"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible"content="ie=edge"><title> Title </title><link rel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"crossorigin="anonymous"></head> <body><div class="container"><div class="row"><div class="col"><button class="btn btn-primary"id="veri-oku">Veri Çek</button></div></div><div class="row"><div class="col"><table class="table"><thead><tr><th>#ID</th><th>Ad</th><th>Soyad</th></tr></thead><tbody id="liste"><tr><th scope="row">1</th><td>Ali</td><td>Bak</td></tr></tbody></table></div></div></div> <script>constbtnCek=document.querySelector("#veri-oku");consttbListe=document.querySelector("#liste");btnCek.addEventListener("click",function(){fetch('./dosya.json').then(cevap=>cevap.json()).then(veri=>{tbListe.innerHTML="";//tabloyu boşaltveri.forEach(function(element,index){constsatir=document.createElement("tr");consthucre1=document.createElement("td");consthucre2=document.createElement("td");consthucre3=document.createElement("td");hucre1.textContent=element.idhucre2.textContent=element.adhucre3.textContent=element.soyadsatir.appendChild(hucre1)satir.appendChild(hucre2)satir.appendChild(hucre3)tbListe.appendChild(satir)});});});</script></body></html>
EtiketlerJavaScript JavaScript JSON Veri Okuma JSON

Từ khóa » Html Ile Xml Den Veri çekme