const table = document.getElementById("table"); fetch("./cms.json") .then((response) => { return response.json(); }) .then((data) => populateContents(data)); function populateContents(data) { data.projects.reverse().forEach((project) => addRow(project)); } function addRow(project) { let row = document.createElement("tr"); let title = document.createElement("td"); title.classList.add("title"); row.appendChild(title); let titleUrl = document.createElement("a"); titleUrl.href = project.url; titleUrl.innerHTML = project.title; title.appendChild(titleUrl); let links = document.createElement("td"); links.classList.add("links"); if (project.pad) { let padLink = document.createElement("a"); padLink.href = project.pad; padLink.innerHTML = "pad"; links.appendChild(padLink); } if (project.git) { let gitLink = document.createElement("a"); gitLink.href = project.git; gitLink.innerHTML = "git"; links.appendChild(gitLink); } if (project.links.length) { project.links.forEach((url) => { let link = document.createElement("a"); link.href = url.url; link.innerHTML = url.title; links.appendChild(link); }); } row.appendChild(links); let categories = document.createElement("td"); categories.classList.add("categories"); project.categories.forEach((tag) => { let category = document.createElement("span"); category.classList.add("tag"); category.innerHTML = tag; categories.appendChild(category); }); row.appendChild(categories); let date = document.createElement("td"); date.classList.add("date"); date.innerHTML = project.date; row.appendChild(date); table.appendChild(row); }