Я хочу использовать данные из API от Mixcloud (аудио-хостинг, такой как soundcloud), чтобы новая подстраница (называется ли она deeplink?) Создавалась при публикации нового сообщения в Mixcloud.
MyПроект - это сайт для подкаста.Я представляю файл index.html, в котором представлены все эпизоды подкастов в списке с подстраницами, каждая из которых посвящена одному эпизоду. макет
Я очень новичок в веб-разработке, поэтому, пожалуйста, потерпите меня.Поэтому мне бы очень хотелось читать ссылки / материалы.
Я выяснил, как получить данные из API-интерфейса JSON, проанализировать их в строки Javascript и изменить innerHTML элементов в index.html.
У меня возникают трудности с пониманием того, как вы можете создавать новые подстраницы всякий раз, когда в Mixcloud публикуется новое сообщение.
У меня также возникают трудности с поиском подходящего материала для прочтения, вероятно, потому что яне знаю правильных слов и терминов для поиска.
Вот фрагмент моего кода.И API / JSON-файл , который я использую.
<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();