How To Get JSON Data From URL In HTML
Last Updated : Mar 11, 2024
IN - HTML JSON | Written & Updated By - Ashish
In this article we will show you the solution of how to get JSON data from URL in HTML, let us understand JSON first. The JSON stands for JavaScript Object Notation.
It is a lightweight data-exchanging format. It is used basically with API. JSON is language-independent and supports all kinds of frameworks and languages.
In this tutorial, we will get JSON data from the URL using jQuery.
Step By Step Guide On How To Get JSON Data From URL In HTML :-
Let us see an example on get JSON data from a URL in HTML. Let us see the code first.
<!DOCTYPE html>
<html lang = " en " >
<head>
<meta charset = " UTF - 8" >
<meta http-equiv = " X-UA-Compatible " content = " IE=edge " >
<meta name = " viewport " content = " width = device-width , initial-scale = 1.0 " >
<title>how to get JSON data from URL in HTML</title>
<script src = " https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js ">
</script>
<style>
h1 {
font-size : larger ;
font-weight : bolder ;
color : lightgreen ;
}
</style>
</head>
<body>
<h1> TALKERSCODE </h1>
<p> how to get JSON data from URL in HTML </p>
<script>
var theURL = ' https://jsonplaceholder.typicode.com/comments '
$.getJSON ( theURL , function ( data ) {
console.log ( data )
for( i = 0 ; i<data.length ; i = i + 1 ){
console.log ( data [ i ].name )
}
} )
</script>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now the <head> tag is used to contain information about the web page, create a <script> tag with a URL that is used to access the library of jQuery. In this tag, a <title> tag is used which helps us to specify a webpage title.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, the <body> tag is used to define the webpage body. All the contents to show on the website are written here.
- <h1> tag used to add heading here.
- Create a <script> tag to add the JavaScript code to get JSON data from URL in HTML.
- We create a variable “ theURL “ using the var function.
- Into that variable “ theURL “ , we placed a URL containing the JSON data we are going to use.
- Using $.getJSON () to put the information into theURL to a function called function(data). The $ sign here used to access jQuery.
- Here , using console.log() to display the data consist in the URL.
- Also we can display particular data like name, email, etc. in it. Here we used a for loop to display all the Names in the JSON data.
Conclusion :-
At last here in conclusion, here we can say that with the help of this article we are able to know how to get JSON data from URLs in HTML.
I hope this article on how to get JSON data from URL in HTML helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
