function extract_data(){ var data = document.getElementsByTagName("tr"); var master = {}; var header = null; for(row of data){ if(row.className == "row0"){ continue; //Skip table headers } else if (row.className == "row1"){ header = row.parentElement.parentElement.parentElement.parentElement.previousElementSibling.innerText; //If we're at a new table, then we have to go up the DOM tree until we //find that section's header. master[header] = []; //And create a new list for that header in the master object. } var row_object = {}; row_object["link"] = row.children[0].children[0].href; //The link can be found in the anchor element in the first cell of the //row. var text = row.children[0].children[0].innerText; //Get the text of the link. row_object["song"] = text.substring(0,text.indexOf("(")-1); //The name of the song is the start of the text until the space before //the parenthesis. I've made sure to use hyphens in place of parentheses in //song titles. row_object["source"] = text.substring(text.indexOf("(")+1, text.indexOf(")")); //The work that the song is from is indicated between the parentheses. row_object["vibes"] = row.children[1].innerText.split(", ") //The vibes are in the second column, delimited by a comma-space. master[header].push(row_object); } return master; } function download(filename, text) { //Borrowed shamelessly from: //https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } var button = document.getElementById("download-JSON"); button.addEventListener("click",function(){ var json_data = JSON.stringify(extract_data(),null,2); download("epics_bgm.json",json_data); });