当 api (json) 发生变化时，您如何创建新的子页面？

Question

我想使用来自 Mixcloud（音频托管服务，如 soundcloud）的 api 的数据，以便在新的 post post加入了 Mixcloud。

我的项目是一个播客网站。我想象 index.html 以列表中的每个播客剧集为特色，每个子页面都专门用于一个剧集。 mockup

我对网络开发还很陌生，所以请多多包涵。因此，我喜欢 references/material 阅读。

我已经弄清楚如何从 JSON api 中获取数据并将其解析为 Javascript 字符串并更改 index.html 中元素的 innerHTML。

我很难理解每当一个新的 post 被 post 编辑到 Mixcloud 时，你会如何生成新的子页面。

我也很难找到合适的 material 来阅读这篇文章，可能是因为我不知道要搜索的正确单词和术语。

到目前为止，这是我的代码片段。还有我正在使用的API / JSON file。

<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();

Answer 1

您似乎希望能够使用客户端代码创建页面的层次结构。我建议在 client vs server 左右开始阅读。 link 是第一个 google 搜索结果。

如果您计划在 javascript 中作为客户端代码执行此操作，您创建的页面将不会实际存在。您将创建一个 Single Page Application that references resources that look like pages but are only stored in memory. Delivery of those pages would be made through a client side router，而无需对服务器资源发出 Web 请求。使用单页应用程序方法，您将无法向多个用户呈现 Mixcloud post 的相同缓存版本；您创建的内存页面仅存在于个人用户浏览器中。

您需要将代码拆分为单独的服务器和客户端代码库才能正常工作。

您的服务器将向 https://api.mixcloud.com/radiomodem/cloudcasts/ 发出请求并为每个子页面创建一个新的物理子页面文件。您的主页可以读取子页面目录的内容并将这些内容显示为可导航的选项。

在客户端，您所拥有的只是 html。

如果您只想学习一种语言，我建议您使用 Node with Express。这将允许您在服务器上运行 JavaScript。

当 api (json) 发生变化时，您如何创建新的子页面？

How might you create new subpages when api (json) changes?

javascript

api

json

deep-linking

mixcloud