let endpoint = "https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&format=json&origin=*§ion=1&page=Padliography&prop=text"; const container = document.getElementById("wiki-contents"); const filtersContainer = document.getElementById("filters-container"); // We use a set and not an array in order to avoid repetition let filters = new Set(); // Request the content to the Wiki API and parse it as a JSON file fetch(endpoint) .then((response) => response.json()) .then((data) => { // Create a new element to insert the response from the wiki and get the table out of it let section = document.createElement("div"); section.innerHTML = data.parse.text["*"]; let wikiTable = section.getElementsByTagName("table")[0]; // Create a new table using the data in the Wiki table createTable(wikiTable); // Fill the filter section with all the tags gathered in the filters Set // We don't need any argument because the filters set is defined as global createFilters(); }); function createTable(data) { let table = document.createElement("table"); // Traverse the rows collection as an array [...data.rows].forEach((row, index) => { // Avoid first row that contains column titles if (index > 0) { // Create a row element let tableRow = document.createElement("tr"); // Columns order could be modified simply by reordering the next 4 sections // Create a cell with title + link to the pad let title = document.createElement("td"); title.appendChild(createTitleLink(row)); tableRow.appendChild(title); // Create a cell with the overview let overview = document.createElement("td"); overview.innerHTML = row.cells[2].innerText; tableRow.appendChild(overview); // Create a cell with categories let categories = document.createElement("td"); categories.appendChild(createTags(row.cells[3].innerText)); tableRow.appendChild(categories); // Create a cell with date let date = document.createElement("td"); date.innerHTML = row.cells[4].innerText; tableRow.appendChild(date); // Insert the row in the table table.appendChild(tableRow); } }); // Insert the table in the container container.appendChild(table); } function createTitleLink(row) { // Take the first cell of the wiki (link) let url = row.cells[0].innerText; // Take the second cell of the wiki (title) let title = row.cells[1].innerText; // Create a link element let link = document.createElement("a"); link.setAttribute("target", "_blank"); // Use the link as href link.href = url; // Use the title as text link.innerHTML = title; return link; } function createTags(categories) { // Split the comma separated list into an array let tags = categories.split(",").map((category) => category.trim()); // Create a list to contain all the tags let tagsContainer = document.createElement("ul"); // For each category create a li element tags.forEach((item) => { let tag = createTag(item); tagsContainer.appendChild(tag); // add the category to the filters Set to use it later filters.add(item); }); return tagsContainer; } function createTag(item) { let tag = document.createElement("li"); tag.classList.add("tag"); tag.innerHTML = item; return tag; } function createFilters() { filters.forEach((item) => { let tag = createTag(item); filtersContainer.appendChild(tag); }); }