loulala loulala - 16 days ago 7
Javascript Question

refresh html content with each new GET request

I have been practicing my Vanilla Js/jQuery skills today by throwing together a newsfeed app using the news-api.

I have included a link to a jsfiddle of my code here. However, I have removed my

API
key.

On first load of the page, when the user clicks on an image for a media outlet, e.g. 'techcrunch', using an
addEventListener
, I pass the image's
id attribute
to the
API
end point
'https://newsapi.org/v1/articles'
and run a
GET
request which then proceeds to create
div
elements with the news articles content.

However, after clicking 1 image, I cannot get the content to reload unless I reload the whole page manually or with
location.reload()
.

On clicking another image the new
GET
request is running and returning results, as I am console logging the results.

I am looking for some general guidance on how to get the page content to reload with each new
GET
request.

Any help would be greatly appreciated.

Many thanks for your time.

Api convention:

e.g
https://newsapi.org/v1/articles?source=techcrunch&apiKey=APIKEYHERE


EventListener:

sourceIMG.addEventListener('click', function() {
$.get('https://newsapi.org/v1/articles?source=' + this.id + '&sortBy=latest&apiKey=APIKEYHERE', function(data, status) {
console.log(data);
latestArticles = data.articles;
for (i = 0; i < latestArticles.length; i++) {
//New Article
var newArticle = document.createElement("DIV");
newArticle.id = "article";
newArticle.className += "article";
//Title
//Create an h1 Element
var header = document.createElement("H1");
//Create the text entry for the H1
var title = document.createTextNode(latestArticles[i].title);
//Append the text to the h1 Element
header.appendChild(title);
//Append the h1 element to the Div 'article'
newArticle.appendChild(header);
//Author
var para = document.createElement("P");
var author = document.createTextNode(latestArticles[i].author);
para.appendChild(author);
newArticle.appendChild(para);
//Description
var description = document.createElement("H4");
var desc = document.createTextNode(latestArticles[i].description);
description.appendChild(desc);
newArticle.appendChild(description);
//Image
var image = document.createElement("IMG");
image.src = latestArticles[i].urlToImage;
image.className += "articleImg";
newArticle.appendChild(image);
//Url link
//Create a href element
var a = document.createElement('a');
var link = document.createElement('p');
var innerLink = document.createTextNode('Read the full story ');
link.appendChild(innerLink);
a.setAttribute("href", latestArticles[i].url);
a.innerHTML = "here.";
link.appendChild(a);
newArticle.appendChild(link);
//Append the Div 'article' to the outer div 'articles'
document.getElementById("articles").appendChild(newArticle);
}
});
}, false);

Answer

I tried your fiddle using an api key. It is working for me in that content new content is appended to the previous content in the #articles div. If I'm understanding your question, when a news service image is clicked you would like for only that news service's articles to show. To do that you would need to clear the contents of #articles before appending new content.

To do that with plain js you could use the following above your for loop:

   // Removing all children from an element
   var articlesDiv = document.getElementById("articles");
   while (articlesDiv.firstChild) {
     articlesDiv.removeChild(articlesDiv.firstChild);
   }

   for (i = 0; i < latestArticles.length; i++) {...

Full disclosure, I added the variable name 'articlesDiv' but otherwise the above snippet came from https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild