JavaScript has great modules and methods to make HTTP requests. These modules can be used to send or receive data from a server-side resource. JSON is used to read data from a web server and display the data on a web page. In this topic, we are going to learn how to make JSON HTTP requests.
JSON
JSON (JavaScript Object Notation) is a lightweight data-interchange format. JSON is a plain text written in JavaScript object notation that is used to send data between computers and their language independently. The JSON format syntax is similar to the code for creating JavaScript objects. This allows JavaScript program conversion of JSON data into JavaScript objects. JSON is based on a subset of JavaScript, meaning, a JSON document can be easily converted into a JavaScript Value. JSON makes it possible to store JavaScript objects as text.
Here is the basic syntax of JSON:
{
"book": [
{
"id": "01",
"language": "Java",
"edition": "third",
"author": "Herbert Schildt"
},
{
"id": "07",
"language": "C++",
"edition": "second",
"author": "E.Balagurusamy"
}
]
}You should already know about JSON and its basic syntax. So, in this topic, you will learn how to use JavaScript to output JSON data to a web page. In the next part, we will go through a simple example of how you can use JavaScript to store JSON text, then output it to a web page.
JSON usage
Here we will demonstrate you how to use JavaScript to store JSON text, then output it to a web page. To showcase the usage of JSON, here is the JSON data we will use as an example:
{
"teacher" : [
{
"teachersname" : "John",
"born" : "1979"
},
{
"teachersname" : "Joe",
"born" : "1983"
},
{
"teachersname" : "Jenny",
"born" : "1991"
}
]
}Okay, now that we have JSON data, let's use JavaScript to take the above JSON data, format it with HTML tags, and output it to an HTML document. First, we will place our JSON data in the displayTeachers() function:
function displayTeachers() {
let data =
{
"teachers" : [
{
"teachersname" : "John",
"born" : "1979"
},
{
"teachersname" : "Joe",
"born" : "1983"
},
{
"teachersname" : "Jenny",
"born" : "1991"
}
]
}
}After that, we will put the data into a variable and format it with HTML tags:
let output = "<h1>Teachers</h1>";
output += "<ul>"; Then, we will loop through the teachers:
for (let i in data.teachers) {
output += "<li>" + data.teachers[i].teachersname + " (Born: " + data.teachers[i].born + ")</li>";
}
output += "</ul>";And output the data in an HTML element that has the teachersList id:
document.getElementById("teachersList").innerHTML=output;Lastly, we will load the above function when the window loads:
window.onload = displayTeachers;Here is the entire code:
<!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>JSON</title>
</head>
<body>
<script>
function displayTeachers() {
let data =
{
"teachers" : [
{
"teachersname" : "John",
"born" : "1979"
},
{
"teachersname" : "Joe",
"born" : "1983"
},
{
"teachersname" : "Jenny",
"born" : "1991"
}
]
}
let output = "<h1>Teachers</h1>";
output += "<ul>";
for (let i in data.teachers) {
output += "<li>" + data.teachers[i].teachersname +
" (Born: " + data.teachers[i].born + ")</li>";
}
output += "</ul>";
document.getElementById("teachersList").innerHTML=output;
}
window.onload = displayTeachers;
</script>
<div id="teachersList"></div>
</body>
</html>Here is the code output:
JSON HTTP Request
As previously stated, JSON is commonly used to read data from a web server and display it on a web page. In this step, you will learn how to read JSON data using XMLHttpRequest.
Let's take a look at this code below:
function requestListener () {
console.log(this.responseText);
}
const request = new XMLHttpRequest();
request.addEventListener("load", requestListener);
request.open("GET", "https://randomuser.me/api/");
request.send();To make a JSON HTTP Request, you should make a new object with XMLHttpRequest. In this example, we use the GET method to obtain JSON data from this API. This is the JSON data that we obtain:
The best browser to read JSON data is Mozilla Firefox. Mozilla Firefox provides a readable JSON format structure.
Conclusion
In this topic, you've learned how to obtain JSON data from a web server and display it on a web page. Remember that JSON is the most used data format because it's really simple and machine-readable. Now that you are packed with JSON knowledge, let's put it to the test!