Skip to content Skip to footer

JSON Verilerini Dinamik Olarak Görüntüleme

JSON Verilerini Dinamik Olarak Görüntüleyen Web Tablosu

Amaç:

Bir web uygulaması geliştirmek ve bu uygulamada dış bir API’den gelen veya lokal bir dosyadan okunan JSON verilerini dinamik olarak bir HTML tablosunda görüntülemek. Bu tablo, kullanıcıların verileri düzenleyebilmesi, arama yapabilmesi veya sıralayabilmesi için etkileşimli olacak.

Teknikler:

  • HTML ve CSS ile temel tablo yapısı ve stil tasarımı.
  • JavaScript kullanarak JSON verilerini çekmek ve tabloya dinamik olarak eklemek.
  • Fetch API kullanarak harici bir API’den JSON veri alma.
  • Tablo sıralama ve arama işlevleri için JavaScript eklemek.

Adımlar:

  1. JSON Verisinin Hazırlanması veya API’den Çekilmesi:
    • Örneğin, bir kullanıcı listesi veya ürün listesi gibi basit JSON verileri.
    • Veriler harici bir API’den veya yerel bir JSON dosyasından çekilebilir.
  2. HTML Yapısının Oluşturulması:
    • Tablo yapısı için temel bir HTML iskeleti oluşturulacak.
  3. JavaScript ile Dinamik Tablo:
    • JSON verileri alındıktan sonra tabloyu dinamik olarak dolduracak bir JavaScript fonksiyonu oluşturulacak.
    • Kullanıcıların verileri sıralaması ve arama yapması için ek işlevler eklenecek.
  4. CSS ile Stil Verme:
    • Tabloya görsel olarak çekici bir stil kazandırılacak.

Örnek JSON Verisi:

[
{
"name": "John Doe",
"age": 28,
"email": "john@example.com"
},
{
"name": "Jane Smith",
"age": 34,
"email": "jane@example.com"
}
]

Örnek Kod:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic JSON Table</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
}
th {
background-color: #f4f4f4;
cursor: pointer;
}
</style>
</head>
<body>

<h2>Dynamic JSON Table</h2>

<input type="text" id="search" placeholder="Search by name..." onkeyup="searchTable()">

<table id="dataTable">
<thead>
<tr>
<th onclick="sortTable(0)">Name</th>
<th onclick="sortTable(1)">Age</th>
<th onclick="sortTable(2)">Email</th>
</tr>
</thead>
<tbody>
<!-- JSON verileri buraya eklenecek -->
</tbody>
</table>

<script>
// Örnek JSON verileri
const data = [
{ "name": "John Doe", "age": 28, "email": "john@example.com" },
{ "name": "Jane Smith", "age": 34, "email": "jane@example.com" },
{ "name": "Alice Johnson", "age": 23, "email": "alice@example.com" }
];

// JSON verilerini tabloya ekleme
function loadTableData(data) {
const tableBody = document.querySelector("#dataTable tbody");
tableBody.innerHTML = ""; // Mevcut tabloyu temizle
data.forEach(item => {
const row = document.createElement("tr");
row.innerHTML = `
<td>${item.name}</td>
<td>${item.age}</td>
<td>${item.email}</td>
`;
tableBody.appendChild(row);
});
}

// Tabloyu yükle
loadTableData(data);

// Tabloyu sıralama fonksiyonu
function sortTable(n) {
const table = document.getElementById("dataTable");
let rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.rows;
for (i = 1; i < (rows.length - 1); i++) {
shouldSwitch = false;
x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];
if (dir === "asc") {
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
} else if (dir === "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
shouldSwitch = true;
break;
}
}
}
if (shouldSwitch) {
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
switchcount++;
} else {
if (switchcount === 0 && dir === "asc") {
dir = "desc";
switching = true;
}
}
}
}

// Arama fonksiyonu
function searchTable() {
const input = document.getElementById("search");
const filter = input.value.toLowerCase();
const table = document.getElementById("dataTable");
const tr = table.getElementsByTagName("tr");
for (let i = 1; i < tr.length; i++) {
const td = tr[i].getElementsByTagName("td")[0];
if (td) {
const txtValue = td.textContent || td.innerText;
if (txtValue.toLowerCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>

</body>
</html>

Açıklama:

  • loadTableData: JSON verilerini alır ve tabloya ekler.
  • sortTable: Kullanıcı tablonun başlıklarına tıklayarak tablodaki verileri sıralayabilir.
  • searchTable: Arama kutusuna bir isim yazıldığında tablo filtrelenir.

Konunun Kazandıracağı Yetkinlikler:

  • JSON verilerini dinamik olarak web sayfasında görüntüleme.
  • HTML ve JavaScript ile etkileşimli bir tablo oluşturma.
  • Tablo sıralama ve arama işlevlerini uygulama.
  • API’den veri çekme ve bu verileri web arayüzüne yansıtma becerisi.

Bu kod konusu, veri işleme, JavaScript kullanımı ve dinamik web geliştirme becerilerini güçlendirmek için faydalı olacaktır.

Alt Bilişim, yapay zeka, mobil uygulama, web geliştirme, CRM ve ERP sistemleri gibi yenilikçi çözümlerle işletmelere özelleştirilmiş yazılım hizmetleri sunar. Teknolojiyle işinizi büyütün!

Merkez Ofis

Nisbetiye Mahallesi, Gazi Güçnar Sokak No:4/7
Beşiktaş, Istanbul

info@altbilisim.com

Hizmetler
Bize Ulaşın

Nisbetiye Mahallesi, Gazi Güçnar Sokak No:4/7
Beşiktaş, Istanbul

Altbilişim © 2021. All Rights Reserved.