How to Use JSON

In this blog, I’m explaining the how get the in the JSON.

Basically JSON is used for the read data from the web server and show the data in the web page.

There are two way to get the web server:

Use JSON.parse ()

The JavaScript function JSON.parse(text) can be used to convert a JSON text into a JavaScript object.

Syntax

JSON.parse(text , reviver)

Where there parameters are:

text: The string to parse as JSON. See the JSON object for a description of JSON syntax.

reviver: If a function, prescribes how the value originally produced by parsing is transformed, before being returned. This was the optional parameter.

It returns object corresponding to the given JSON text. If the string parse is not valid it throws the exception.

JSON.parse () Example

Here three student’s records as string that contain the JSON syntax.

 var student='{"students":['+
'{"name":"Ajay Mishra","age":21,"address":"Allahabad","phone":"121 1234567","email":"ajay@mail.com"},'+
'{"name":"Satish Kumar","age":22,"address":"Allahabad","phone":"121 1234568","email":"satish@mail.com"},'+
'{"name":"Sonu Sharma","age":21,"address":"Allahabad","phone":"121 1234569","email":"sonu@mail.com"}]}';

JSON syntax is the JavaScript syntax. Use the JSON.parse() function is used for covert the JSON text into JavaScript object.

Example

 <!doctype html>
<html>
                <head>
                                <title>JSON.parse() Example</title>
                </head>
                <body>
                                <h1>JSON.parse() Example</h1>
                                <div id="student"></p>
                                <script>
                                                var student='{"students":['+
                                                '{"name":"Ajay Mishra","age":21,"address":"Allahabad","phone":"121 1234567","email":"ajay@mail.com"},'+
                                                '{"name":"Satish Kumar","age":22,"address":"Allahabad","phone":"121 1234568","email":"satish@mail.com"},'+
                                                '{"name":"Sonu Sharma","age":21,"address":"Allahabad","phone":"121 1234569","email":"sonu@mail.com"}]}';
                                                var obj=JSON.parse(student);
                                                document.getElementById('student').innerHTML =
                                                "<b>Name: </b>" + obj.students[1].name+
                                                "<br><b>Age: </b>" + obj.students[1].age+
                                                "<br><b>Address: </b>" + obj.students[1].address+
                                                "<br><b>Phone: </b>" + obj.students[1].phone+
                                                "<br><b>E-mail: </b>" + obj.students[1].email;
                                </script>
                </body>
</html>

This example output is given below. The object contain three student objects that contain records.

Use eval ()

JSON.eval () function is also used for convert the JSON object JSON text to JavaScript object.

Syntax

JSON.eval (string);

Where the parameter string is expression, statement, or sequence of statements. The expression can include variables and properties of existing objects.

Let’s try this example with same student strings.

Example

 <!doctype html>
<html>
                <head>
                                <title>eval() Example</title>
                </head>
                <body>
                                <h1>eval() Example</h1>
                                <div id="student"></p>
                                <script>
                                                var student='{"students":['+
                                                '{"name":"Ajay Mishra","age":21,"address":"Allahabad","phone":"121 1234567","email":"ajay@mail.com"},'+
                                                '{"name":"Satish Kumar","age":22,"address":"Allahabad","phone":"121 1234568","email":"satish@mail.com"},'+
                                                '{"name":"Sonu Sharma","age":21,"address":"Allahabad","phone":"121 1234569","email":"sonu@mail.com"}]}';
                                                var obj=eval("("+student+")")
                                                document.getElementById('student').innerHTML =
                                                "<b>Name: </b>" + obj.students[1].name+
                                                "<br><b>Age: </b>" + obj.students[1].age+
                                                "<br><b>Address: </b>" + obj.students[1].address+
                                                "<br><b>Phone: </b>" + obj.students[1].phone+
                                                "<br><b>E-mail: </b>" + obj.students[1].email;
                                </script>
                </body>
</html>

The above example give the output same as JSON.parse() example but the eval() function can compile and execute any JavaScript. This represents a potential security problem. So it try to avoid it.

Differences between JSON.parse () vs eval()

There are following differences between JSON.parse () and eval():

· JSON is just a subset of the JavaScript but the eval evaluated the JavaScript language and not just a subset.

· JSON only allow to parse the JSON format data but eval accept any type of string.

· Not all browser support the native JSON so there will be time to use the eval to the JSON string.

· The eval function is very fast. However, it can compile and execute any JavaScript program, so there can be security issues. The use of eval is indicated when the source is trusted and competent. It is much safer to use a JSON parser.

blog

There are two way to get the web server:

Use JSON.parse ()

JSON.parse () Example

Example

Use eval ()

Example

Differences between JSON.parse () vs eval()

Anchal Kesharwani

Leave Comment

Comments

Liked By