. Advertisement .
..3..
. Advertisement .
..4..
JavaScript Object Notation (JSON) is a popular data-interchange format commonly used when data is sent between computer systems. This guide will show you how to read JSON files with JavaScript and process them in a browser.
Read JSON Files With JavaScript
How Your Browser Receives JSON Data
JSON is a data format created for electronic data interchange. It enables the storage and transmission of serializable values between servers and web applications in clients (browsers).
However, your browser can’t receive JSON data in its raw pair form. You must use specialized JavaScript functions to process and manipulate it.
The JSON object in this programming language can parse and convert pair values to JSON. The functions you need to pay attention to are JSON.parse() and JSON.stringify().
Demonstration Of Loading JSON With JavaScript
Here is an example of using JavaScript to load a remote JSON file and parse it into a local variable.
<body>
<button onclick="load_json()">Load JSON file</button>
<p id="json_display"></p>
<script>
async function load_json() {
const jsonURL = 'https://raw.githubusercontent.com/LearnWebCode/json-example/master/pets-data.json';
const request = new Request(jsonURL);
const response = await fetch(request);
const pets_txt = await response.text();
const pets_obj = JSON.parse(pets_txt);
const pets = JSON.stringify(pets_obj);
console.log(pets_obj);
document.getElementById("json_display").innerHTML = pets;
}
</script>
</body>
This is the content of the original JSON file:
{
"pets": [
{
"name" : "Purrsloud",
"species" : "Cat",
"favFoods" : ["wet food", "dry food", "<strong>any</strong> food"],
"birthYear" : 2016,
"photo" : "https://learnwebcode.github.io/json-example/images/cat-2.jpg"
},
{
"name" : "Barksalot",
"species" : "Dog",
"birthYear" : 2008,
"photo" : "https://learnwebcode.github.io/json-example/images/dog-1.jpg"
},
{
"name" : "Meowsalot",
"species" : "Cat",
"favFoods" : ["tuna", "catnip", "celery"],
"birthYear" : 2012,
"photo" : "https://learnwebcode.github.io/json-example/images/cat-1.jpg"
}
]
}
When you press the button, your browser will display this under it:
{"pets":[{"name":"Purrsloud","species":"Cat","favFoods":["wet food","dry food","any food"],"birthYear":2016,"photo":"https://learnwebcode.github.io/json-example/images/cat-2.jpg"},{"name":"Barksalot","species":"Dog","birthYear":2008,"photo":"https://learnwebcode.github.io/json-example/images/dog-1.jpg"},{"name":"Meowsalot","species":"Cat","favFoods":["tuna","catnip","celery"],"birthYear":2012,"photo":"https://learnwebcode.github.io/json-example/images/cat-1.jpg"}]}
How The Example Snippet Works
When the button is pressed, its onclick event will trigger the load_json() function.
It will then use Request() and fetch() from the Fetch API to retrieve the .json file from GitHub servers and put its content into the pets_txt variable.
The data we have is a string. To convert it into a JavaScript object, you can use the JSON.parse() function. The return value can be string, array, number, boolean, object, or null, depending on the content of the pest_txt content.
You can also use the .json() method to directly parse the content into a JavaScript object literal with the Response interface without using JSON.parse().
const response = await fetch(request);
const pets_obj = await response.json();
const pets = JSON.stringify(pets_obj);
To show how you can return this JSON object back to a string, the snippet also includes the JSON.stringify() function. It outputs a string corresponding to the given JavaScript object.
Conclusion
You can use the built-in JSON object to read JSON files with JavaScript. It also comes with methods for converting supported objects back to JSON strings to some extent.
To format Javascript more beautiful use Javascript formatter(Javascript beautifier) tool at ittutoria.net
Leave a comment