user3699998 user3699998 - 7 months ago 16
Javascript Question

Jquery Loading news listings into dom

I want simply to load/display my top 500 news into my DOM.
I'm not sure why doesn't display it on my

<div id="hackernewsrss" ></div>


And if there's any other better way to display this? or to code it? Perhaps I can learn.



var LoadNews = $("#hackernewsrss");


LoadNews.load(function(event) {
parseTopStories('https://hacker-news.firebaseio.com/v0/topstories', '#hackernewsrss');
});


function parseTopStories(url, container) {
var hackernewsAPI = "https://hacker-news.firebaseio.com/v0/topstories.json";
$.getJSON(hackernewsAPI, function(json) {
var requests = [];
for (var i = 0; i < 10; i++) {
requests.push($.getJSON('https://hacker-news.firebaseio.com/v0/item/' + json[i] + '.json'));
}
$.when.apply($, requests)
.done(function() {
var results = []
.slice.call(arguments);
var list = results.map(function(arr) {
var thetemplate = '<li><a href="' + arr[0].url + '">' + arr[0].title + '</a></li>';
return thetemplate;
});
$(container).html('<ol>' + list.join('') + '</ol>');
console.log(container); //logs #hackernewsrss
});
});
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hackernewsrss"></div>





Can anyone help please?

Answer

If you try:

$(function(){
      parseTopStories('https://hacker-news.firebaseio.com/v0/topstories', '#hackernewsrss');
});

All goes well.

I am not sure why you have load event attached to the div. It is usually used to trigger when image is loaded or window: JQuery reference