未使用 Javascript 填充 HTML 中的列表

Question

我在学习Javascript。我正在为个人项目阅读 RSS 提要。我正在使用 'RSS-parser' npm 库来避免 CORS 错误。而且我正在使用 Browserify bundler 使其在浏览器上运行。

当我在终端上运行这段代码时，它给我的输出没有任何问题。但是当我尝试使用浏览器时，它什么也不打印。

我对异步 JS 的了解有限，但我很确定这里没有错误，因为我在不更改现有代码的情况下向其中添加了代码。

let Parser = require('rss-parser');
let parser = new Parser();

let feed;
async () => {

  feed = await parser.parseURL('https://www.reddit.com/.rss');
  feedTheList();
};


// setTimeout(function() {
//   //your code to be executed after 1 second
//   feedTheList();

// }, 5000);


function feedTheList()
{
  document.body.innerHTML = "<h1>Total Feeds: " + feed.items.length + "</h1>";


    let u_list = document.getElementById("list")[0];

    feed.items.forEach(item => {



        var listItem = document.createElement("li");

        //Add the item text
        var newText = document.createTextNode(item.title);
        listItem.appendChild(newText);
        listItem.innerHTML =item.title;

        //Add listItem to the listElement
        u_list.appendChild(listItem);

    });
}

这是我的 HTML 代码。

<body>

     <ul id="list"></ul>
     <script src="bundle.js"></script>
</body>

非常感谢任何指导。

Answer 1

document.getElementById() returns 单个元素，不是集合，所以不需要索引。所以这个：

let u_list = document.getElementById("list")[0];

将 u_list 设置为 `undefined，您应该会在稍后的代码中遇到错误。它应该只是：

let u_list = document.getElementById("list");

此外，当您这样做时：

listItem.innerHTML =item.title;

它将用这个 HTML 替换您在上一行附加的文本节点。附加文本节点或分配给 innerHTML（或更准确地说，innerText），您不需要同时执行这两项操作。

Answer 2

Looks like the async call is not being executed; You need to wrap it in an anonymous function call:

请参阅此处的示例： https://www.npmjs.com/package/rss-parser

本质上，

var feed; // change let to var, so feed can be used inside the function
// wrap the below into a function call 
(async () => {
  feed = await parser.parseURL('https://www.reddit.com/.rss');
  feedTheList();
})(); // the (); at the end executes the promise

现在它将执行并且 feed 应该有项目。

CORS errors when making request

如 https://www.npmjs.com/package/rss-parser 的文档中所述，如果您在资源上遇到 CORS 错误，请使用 CORS 代理。我已经更新了他们的示例以适合您的代码：

// Note: some RSS feeds can't be loaded in the browser due to CORS security.
// To get around this, you can use a proxy.
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"

let parser = new RSSParser();
(async () => {
    await parser.parseURL(CORS_PROXY + 'https://www.reddit.com/.rss', function(err, feed) {    
        feedTheList(feed);
    });
})();

function feedTheList(feed)
{
    // unchanged
}

最后一件事：该行

document.body.innerHTML = "<h1>Total Feeds: " + feed.items.length + "</h1>";

将删除 <body>

的所有内容

我建议研究一下 element.appendChild 是如何工作的，或者只是将 <h1> 标签放在 HTML 中并修改它的 innerHTML 属性。

未使用 Javascript 填充 HTML 中的列表

Not Populating list in HTML with Javascript

html

javascript

rss

browserify