how do I convert json data into Html tag?

Question

I am trying to display JSON data in the Html tag. But I got the error:

Uncaught (in promise) TypeError.

 async function fetchData() { const response = await fetch('http://newsapi.org/v2/top-headlines?country=in&apiKey=520bf969179e416aa2c3608591647a76'); const data = await response.json(); console.log(data); document.getElementById("display").insertAdjacentText = ` ${data.articles.map(function (article) { return ` <ul id="news-articles"> <li class="article"><img class="article-img" src="${article.urlToImage}" alt="article-img"></li> <li class="article"><h2 class="article-title">${article.title}</h2></li> <li class="article"><p class="article-description">${article.description}</p></li> <li class="article"><span class="article-author">${article.author}</span></li> <li class="article"><a class="article-link" href="">${article.url} target="_blank"> </a></li> </ul> ` }).join('')}` } fetchData();

 <div class="display"></div>

Answer 1

Currently you are inserting HTML entities as text, which is not going to work.

Try

 async function fetchData() { const response = await fetch('http://newsapi.org/v2/top-headlines?country=in&apiKey=520bf969179e416aa2c3608591647a76'); const data = await response.json(); console.log(data); document.getElementsByClassName("display")[0].innerHTML = data.articles.map(function (article) { return ` <ul id="news-articles"> <li class="article"><img class="article-img" src="${article.urlToImage}" alt="article-img"></li> <li class="article"><h2 class="article-title">${article.title}</h2></li> <li class="article"><p class="article-description">${article.description}</p></li> <li class="article"><span class="article-author">${article.author}</span></li> <li class="article"><a class="article-link" href="">${article.url} target="_blank"> </a></li> </ul>`; }).join(''); } fetchData();

Answer 2

The problem is your div element is of class display , not id display , and thus document.getElementById("display") returns null. Change class="display" to id="display" .

Also, use document.getElementById("display").innerHTML for this.

Answer 3

You referenced by id="display" , but it was set to class="display" .

 async function fetchData() { const response = await fetch('http://newsapi.org/v2/top-headlines?country=in&apiKey=520bf969179e416aa2c3608591647a76'); const data = await response.json(); document.getElementById("display").innerHTML = data["articles"].map( article => `<ul id="news-articles"> <li class="article"><img class="article-img" src="${article.urlToImage}" alt="article-img"></li> <li class="article"><h2 class="article-title">${article.title}</h2></li> <li class="article"><p class="article-description">${article.description}</p></li> <li class="article"><span class="article-author">${article.author}</span></li> <li class="article"><a class="article-link" href="">${article.url} target="_blank"> </a></li></ul>`).join(''); } fetchData();

 <div id="display"></div>