Не заполнять список в HTML с помощью Javascript - PullRequest
Новая
       18

Не заполнять список в HTML с помощью Javascript

0 голосов
/ 20 ноября 2018

Я изучаю Javascript.Я работаю над чтением RSS-каналов для личного проекта.Я использую библиотеку npm 'RSS-parser', чтобы избежать ошибки CORS.Кроме того, я использую упаковщик Browserify, чтобы он работал в браузере.

Когда я запускаю этот код на терминале, он дает мне вывод без каких-либо проблем.Но когда я пытаюсь использовать браузер, он ничего не печатает.

Мои знания об асинхронном 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>

Любое руководство приветствуется.

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Похоже, асинхронный вызов не выполняется;Вам нужно заключить его в анонимный вызов функции:

См. Пример здесь: 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 при выполнении запроса

Как отмечено в документации на 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.

0 голосов
/ 20 ноября 2018

document.getElementById() возвращает один элемент, а не коллекцию, поэтому вам не нужно его индексировать.Итак, это: 

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

устанавливает u_list в значение `undefined, и вы должны получить ошибки позже в коде.Это должно быть просто: 

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

Кроме того, когда вы делаете: 

listItem.innerHTML =item.title;

, он заменит текстовый узел, который вы добавили в предыдущей строке, этим HTML.Либо добавьте текстовый узел, либо присвойте innerHTML (или, точнее, innerText), вам не нужно делать и то и другое.

...