I would like to incorporate data from the Mixcloud API (an audio hosting service similar to SoundCloud) to automatically generate new subpages whenever a new post is published on Mixcloud.
My current project involves creating a website for a podcast. The main page (index.html) will display a list of all podcast episodes, with individual subpages dedicated to each episode. See this mockup for reference.
As a beginner in web development, I am seeking helpful resources and references to enhance my knowledge in this area.
Currently, I have been able to extract data from the JSON API, parse it into JavaScript strings, and update the content of elements on the index.html page.
However, I am struggling to understand the process of automatically generating new subpages whenever a new post is added to Mixcloud.
Additionally, I am finding it challenging to locate relevant reading materials on this topic, possibly due to my limited knowledge of the terminology and keywords to search for.
Below is an excerpt of the code I have been working on, along with the link to the API/JSON file I am utilizing.
<div class="episode">
<div class="episode-title">Loading episode...</div>
</div>
<div class="episode">
<div class="episode-title">Loading episode...</div>
</div>
<div class="episode">
<div class="episode-title">Loading episode...</div>
</div>
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
//parse JSON to JavaScript objects
var response = JSON.parse(xhttp.responseText);
//array of the first 3 podcast episodes
var episodes = document.getElementsByClassName("episode");
//array of the first 3 podcast episode titles
var episodeTitles = document.getElementsByClassName("episode-title");
//loop to update innerHTML
for(var i = 0; i < episodes.length; i++) {
var episodeTitle = response.data[i].name;
episodeTitles[i].innerHTML = episodeTitle;
}
}
};
xhttp.open("GET", "https://api.mixcloud.com/radiomodem/cloudcasts/", true);
xhttp.send();