PADliography/contents.js

let page = "Padliography";
let endpoint = `https://pzwiki.wdka.nl/mw-mediadesign/api.php?action=parse&format=json&origin=*&section=1&page=${page}&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);
	});
}