Home > DeveloperSection > Blogs > Working with JSON Files

Working with JSON Files


JSON JSON 
Ratings:
1 Comment(s)
 1144  View(s)
Rate this:

Working with JSON Files

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 show the array list as employee’s in the div as 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 employee as 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!


json file

By Kamlakar  on   one year ago
nice blog

Don't want to miss updates? Please click the below button!

Follow MindStick