Urai List Json With Javascript
Data Json
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.my-category {
font-weight: bold;
margin-top: 20px;
}
.my-link-list {
margin-left: 20px;
}
.my-link-item {
margin: 5px 0;
}
.my-container {
display: flex;
flex-wrap: wrap;
}
.my-column {
flex: 1;
min-width: 30%;
box-sizing: border-box;
padding: 10px;
}
</style>
</head>
<body>
<div class="my-container" id="my-link-container"></div>
<script>
async function fetchLinks() {
const response = await fetch('URL_TO_YOUR_JSON_FILE');
const data = await response.json();
return data;
}
function groupByCategory(data) {
return data.reduce((acc, curr) => {
(acc[curr.kategori] = acc[curr.kategori] || []).push(curr);
return acc;
}, {});
}
function createLinkItem(link) {
return `
<div class="my-link-item">
<i class="far fa-thumbs-up"></i> <a href="${link.url}" target="_blank">${link.judul}</a>
</div>
`;
}
function createCategorySection(category, links) {
return `
<div class="my-category">
<i class="fa fa-th-large"></i> ${category}
</div>
<div class="my-link-list">
${links.map(createLinkItem).join('')}
</div>
`;
}
async function renderLinks() {
const linkContainer = document.getElementById('my-link-container');
const data = await fetchLinks();
const groupedData = groupByCategory(data);
const columns = ['', '', ''];
let i = 0;
for (const [category, links] of Object.entries(groupedData)) {
columns[i % 3] += createCategorySection(category, links);
i++;
}
columns.forEach(column => {
const columnDiv = document.createElement('div');
columnDiv.className = 'my-column';
columnDiv.innerHTML = column;
linkContainer.appendChild(columnDiv);
});
}
renderLinks();
</script>
</body>
</html>
EP Note:
- Ganti
URL_TO_YOUR_JSON_FILEdengan URL yang mengarah ke file JSON. - Script ini menggunakan class CSS
.my-category,.my-link-list,.my-link-item,.my-container, dan.my-column. - Pastikan file JSON dapat diakses publik, atau jika perlu, gunakan hosting yang sesuai untuk file tersebut.
Audio Title
