Not Populating list in HTML with Javascript

Question

I am learning Javascript. I am working on reading RSS feeds for a personal project. I am using 'RSS-parser' npm library to avoid CORS error. And also I am using Browserify bundler to make it work on the browser.

When I run this code on the terminal it gives me output without any issue. But when I try with the browser it prints nothing.

My knowledge about Asynchronous JS is limited but I am pretty sure it doesn't have errors in here as I added code to it without changing existing code.

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

    });
}

Here is my HTML code.

<body>

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

Any guidance is much appreciated.

Any console errors? Hard to say. I would open a developer tools, network tab, verify that results are coming, and then make sure that this code runs after DOMContentLoaded event, otherwise document.body may not be available yet. document.addEventListener("DOMContentLoaded",function(){//yourcode }); -- a quick and easy way to check this also is just place your script at the very bottom of your page, as is. This will ensure it runs after DOM is loaded. And, if the network tab shows result RSS is not coming, then something with browserify and rss-parser may be the problem. — Dmitriy Khaykin
– Dmitriy Khaykin, Commented Nov 20, 2018 at 19:46

Barmar · Accepted Answer · 2018-11-20 19:46:19Z

2

document.getElementById() returns a single element, not a collection, so you don't need to index it. So this:

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

sets u_list to `undefined, and you should be getting errors later in the code. It should just be:

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

Also, when you do:

listItem.innerHTML =item.title;

it will replace the text node that you appended on the previous line with this HTML. Either append the text node or assign to innerHTML (or more correctly, innerText), you don't need to do both.

answered Nov 20, 2018 at 19:46

Barmar

789k57 gold badges555 silver badges669 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Roon13 Over a year ago

Did changes as you mentioned but Still nothing showing on the browser.

Barmar Over a year ago

Are you getting any errors in the JavaScript console?

Roon13 Over a year ago

No errors. Also I have basic html file nothing fancy. Only unordered list.

Barmar Over a year ago

If you put console.log(feed.items) in feedTheList, do you see the expected result?

Roon13 Over a year ago

feed.items is empty.

|

Dmitriy Khaykin · Accepted Answer · 2018-11-20 21:15:34Z

1

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

See the example here: https://www.npmjs.com/package/rss-parser

Essentially,

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

Now it will execute and feed should have items.

CORS errors when making request

As noted in the documentation at https://www.npmjs.com/package/rss-parser, if you get CORS error on a resource, use a CORS proxy. I've updated their example to fit your code:

// 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
}

One last thing: The line

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

Will remove all of the content of <body>

I suggest to look into how element.appendChild works, or just place the <h1> tag in your HTML and modify its innerHTML property instead.

edited Nov 20, 2018 at 21:15

answered Nov 20, 2018 at 20:39

Dmitriy Khaykin

5,2581 gold badge23 silver badges32 bronze badges

3 Comments

Dmitriy Khaykin Over a year ago

That is covered in the docs I linked, and there is a workaround. I'll add to my answer.

Roon13 Over a year ago

Now I am getting all the item data. But list is not getting populated. No errors.

Dmitriy Khaykin Over a year ago

And change let u_list to var u_list;, since let is intended for the immediate scope only, but you are creating that variable and then using it inside a function where it does not have scope.

Collectives™ on Stack Overflow

Not Populating list in HTML with Javascript

2 Answers 2

13 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

13 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related