How to parse this JSON and use it inside an html element using javascript or AJAX please help me

JavaScript
1

http://www.sharad.cf/papi/data.json

2

Please post the code you have tried already.

2 Likes
3

Looking at the code, it’s pretty clean. Have you looked into how (for example) a fetch request can be handled? It is pretty explanatory how to parse out the JSON. You already have the JSON itself, so you can see the structure.

As @lionel-rowe has said, it’s not really fair to ask us to write your code for you. This is a forum where we answer questions and help to fix existing code. Please share with us what you’ve tried. Perhaps a github or a codepen would be useful.

And for that fetch api, take a look at https://devdocs.io/dom/fetch_api/using_fetch

1 Like
4 
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
 if (this.readyState == 4 && this.status == 200)  {

  var myObj = JSON.parse(this.responseText);
	for (i in myObj.posts)	{
      x += "<article> <h2>" + myObj.posts[i].title + "</h2>";
      x += "<span>Written by <b>" + myObj.posts[i].author + "</b>  on <b>" + myObj.posts[i].date + "</b>";
      x += "</span>";
      x += myObj.posts[i].bodyHtml + "<br> </article>";
	}
    
	document.getElementById("posts").innerHTML = x;
  
  }
};

xmlhttp.open("GET", "https://raw.githubusercontent.com/sharadcodes/post_api/gh-pages/merged_file.json", true);
xmlhttp.send();

I solved the problem … Actually I was learning json and how to parse it

5

Thanks for that resource …
It was helpful

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200)  {

 var myObj = JSON.parse(this.responseText);
   for (i in myObj.posts)	{
     x += "<article> <h2>" + myObj.posts[i].title + "</h2>";
     x += "<span>Written by <b>" + myObj.posts[i].author + "</b>  on <b>" + myObj.posts[i].date + "</b>";
     x += "</span>";
     x += myObj.posts[i].bodyHtml + "<br> </article>";
   }
   
   document.getElementById("posts").innerHTML = x;
 
 }
};

xmlhttp.open("GET", "https://raw.githubusercontent.com/sharadcodes/post_api/gh-pages/merged_file.json", true);
xmlhttp.send();