In this blog, I’ explain how to use and create json files. 

A common use of JSON is to read data from a web server, and display the data in a web page.

Create an example to read JSON data from the js file.

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>JSON Files Example</title>

</head>

<body>

 

    <h1>JSON Files Example</h1>

    <div id="name" style="float:left"></div>

    <div id="profession" style="float:right;margin-right: 80%;"></div>

 

    <script>

        function employeeList(arr) {

            var names = "<b>Name</b><br>";

            var professions = "<b>Profession</b><br>";

            var i;

            for (i = 0; i < arr.length; i++) {

                names += arr[i].name+"<br>";

                professions += arr[i].profession + "<br>";

            }

            document.getElementById("name").innerHTML = names;

            document.getElementById("profession").innerHTML = professions;

        }

    </script>

    <script src="Employee.js"></script>

</body>

</html>

Here we need to this example explained. In the above example use the Employee.js file that show the employee name and profession as list. 

1.       Create Array of object

Use an array object for storing the data. In this array all contain two information that is name and profession of employee.

[

                {

                    "name": "Amit Patel",

                    "profession": "Software Engineer"

                },

                {

                    "name": "Satish Kumar",

                    "profession": "Software Engineer"

                },

                {

                    "name": "Dev Shukla",

                    "profession": "Web Developer"

                }

]



2. Display the Employee List 

Create a javascript function that shows the array list as an employee’s in the div name and profession.

function employeeList(arr) {

            var names = "<b>Name</b><br>";

            var professions = "<b>Profession</b><br>";

            var i;

            for (i = 0; i < arr.length; i++) {

                names += arr[i].name+"<br>";

                professions += arr[i].profession + "<br>";

            }

            document.getElementById("name").innerHTML = names;

            document.getElementById("profession").innerHTML = professions;

        } 

Call employeeList() with textArray:
employeeList(textArray);

 3.   Use the array as argument 

Call the employeeList() function to get the list of an employee as an argument:

 

employeeList([

                {

                    "name": "Amit Patel",

                    "profession": "Software Engineer"

                },

                {

                    "name": "Satish Kumar",

                    "profession": "Software Engineer"

                },

                {

                    "name": "Dev Shukla",

                    "profession": "Web Developer"

                }

]); 


4. Put this function in JS file
This code put in a js file named as Employee.js as like this:
Employee.js

employeeList([

                {

                    "name": "Amit Patel",

                    "profession": "Software Engineer"

                },

                {

                    "name": "Satish Kumar",

                    "profession": "Software Engineer"

                },

                {

                    "name": "Dev Shukla",

                    "profession": "Web Developer"

                }

]);



5. Add js file in your program 

This Employee.js file add in the program by the script tag like as:

 

<script src="Employee.js"></script> 

  Script add Employee.js file in your program that contain employee dat. 

I hope that this blog is helpful for you. Thanks!

Leave Comment