Working with JSON files in Javascript

JavaScript Object Notation (JSON) is commonly used for transmitting data in web applications (e.g., sending some data from the server to the client, so it can be displayed on a web page, or vice versa).JSON is a standard text-based format for representing structured data based on JavaScript object syntax. It is also a common standard you'll come across quite often. We have therefore given you all you need to work with JSON using JavaScript, including parsing JSON so you can access data within it, and creating JSON.

Create the object

As we discussed here, objects can be created using various method. in creating a JSON file, we will be using one of the object methods described in the link above. We start by creating a simple object which is accessed through a drop down menu as below:

Example 1:

<html>
<head>
   <style>
   .divider{
   background-color: teal;
   color: black;
   width: 400px
   height:400px;
   }
   </style>
</head>
<body>
   <img id="source_image" alt=".." src='put your image path here' /><br><br>

Here we create a drop down menu with the select tag, to access the items in the object:
   <div id= 'd1' class='divider'>
       <h1>Simple Projects in Javascripts</h1><br><br>
       <p><strong>Select your choice country from the list, to get the description.</strong></p>

       <select id="mySelect" onchange=" state_Function()">
       <option value="Select your state">Select your state
       <option value="Abia">Abia
       <option value="Adamawa">Adamawa
       <option value="Akwaibom">Akwaibom
       <option value="Anambra">Anambra
       </select>

Here we create the object:

var States={
"descriptions":"States in Nigeria",
"details":[
{
"Name":"Abia",
"Description":"Blesses with gold",
"Language":"Ibo"
},
{
"Name":"Adamawa",
"Description":"Big state very rich in oil",
"Language":"Hausa"
},
   {
"Name":"Akwaibom",
"Description":"Natural resources in abundance with solid minerals",
"Language":"Efik"
},
   {
"Name":"Anambra",
"Description":"Heart of business n eastern land",
"Language":"ibo"
},
   ]
}

Here we create a function that uses the object:

function state_Function() {
var get_state= document.getElementById("mySelect").value;

Here we look through all the items in the object
for (i in States.details){

And select the item "details ---- using "States.details[i]"
var json_value=States.details[i]

Now we make a decision using an if statement to compare users input to the values in the array details (in this case we select "Name")
if (get_state==json_value["Name"]){

Now we display the output based on the conclusion above
           let description=json_value[ "Description"], lang=json_value[ "Language"];
           document.getElementById("demo").innerHTML = "You selected: " + get_state + '<br/>'+'<br/>' + 'Description:' + " " + description + '<br/>'+'<br/>'+ 'Language:' + " " + lang + '<br/>' +'<br/>'+ ' ' + 'Select another state to view its description';
       }
   }
}
</script>

</body>
</html>

Example 2:

In this secondd example, we shall remove the object create a new file and saved the object as States.js as below.

Then we add the external .js to our head tag and call in the script as below:

<!DOCTYPE html>
<html>
<head>
   <style>
   .divider{
   background-color: teal;
   color: black;
   width: 400px
   height:400px;
   }
   </style>
   <script type="text/javascript" src="States.js"></script>
</head>
<body>

   <div id= 'd1' class='divider'>
       <h1>Simple Projects in Javascripts</h1><br><br>
       <p><strong>Select your choice country from the list, to get the description.</strong></p>

</body>
</html>

Conclusion: in this section, we have looked at working with objects and json files. Now you can modify the code to make the json file hold a different type of data, and then format your display for the appropriate result. Find out other ways to load a json file.