Professional Documents
Culture Documents
Json PDF
Json PDF
1
JSON
▪JSON stands for JavaScript Object Notation
▪JSON is a text format for storing and
transporting data
▪JSON is "self-describing" and easy to understand
▪SON is a lightweight data-interchange format
▪JSON is plain text written in JavaScript object
notation
▪JSON is used to send data between computers
▪JSON is language independent
JSON string:
'{"name":"John", "age":30, “address":”CBE”}'
It defines an object with 3 properties:
Name ,age, address
2
JSON
□The JSON format is syntactically similar to the code for creating
JavaScript objects.
□Because of this, a JavaScript program can easily
convert JSON data into JavaScript objects.
□Since the format is text only, JSON data can easily
be sent between computers, and used by any
programming language.
□JavaScript has a built in function for converting JSON
strings into JavaScript objects:
JSON.parse()
JSON - {"name":"John"}
6
JSON.parse()
A common use of JSON is to exchange data to/from a
web server.
When receiving data from a web server, the data is
always a string.
Parse the data with JSON.parse(), and the data
becomes a JavaScript object.
Example - Parsing JSON text from a web server:
'{"name":"John", "age":30, "city":"New York"}‘
7
<!DOCTYPE html>
<html>
<body>
<h2>Creating an Object from a JSON String</h2>
<p id="demo"></p>
<script>
const txt = '{"name":"kumar", "age":30, "city":"india"}'
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ",
" + obj.age+" , "+obj["city"];
</script></body></html>
8
Array as JSON
When using the JSON.parse() on a JSON derived from an
array, the method will return a JavaScript array, instead of
a JavaScript object.
<!DOCTYPE html>
<html><body>
<h2>Parsing a JSON Array.</h2>
<p>Data written as an JSON array will be parsed into a
JavaScript array.</p>
<p id="demo"></p>
<script>
const text = '[ “SSS", "BBBB", "AAA", “GGGG" ]';
const myArr = JSON.parse(text);
document.getElementById("demo").innerHTML = myArr[0];
</script></body></html>
Output: SSS
9
JSON.stringif
y()
When sending data to a web server, the data has to be a string.
object in JavaScript:
10
<!DOCTYPE html>
<html>
<body>
<h2>Create a JSON string from a JavaScript
bject.</h2>
<p id="demo"></p>
<script>
const obj = {name: "John", age: 30, city: "New
York"};
const myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML =
myJSON;
</script></body></html>
11
Stringify a JavaScript Array
It is also possible to stringify JavaScript
arrays:
array in JavaScript:
const arr = [“John", "Peter", "Sally", "Jane"];
Use the JavaScript function JSON.stringify() to
convert it into a string.
const myJSON = JSON.stringify(arr);
12
<!DOCTYPE html>
<html><body>
<h2>Create a JSON string from a JavaScript
array.</h2>
<p id="demo"></p>
<script>
const arr = ["John", "Peter", "Sally", "Jane"];
const myJSON = JSON.stringify(arr);
document.getElementById("demo").innerHTML =
myJSON;
</script></body></html>
13
JSON Function Files
A common use of JSON is to read data from a web
server, and display the data in a web page.
4 easy steps, how to read JSON data, using
function files.
1. Create a function with parameters values and
store as .js file
2. Create a html file with JS and call the function
3. Add external script <script src=“fun
name.js"></script> (or)
4. Include function with parameters values
in same html file as prototype end with
semicolon;
14
<html><body> Fun- Array as parameter
<div id="id01"></div>
<script>
myFunction(["ssss","dddd","ggg"]);
function myFunction(arr) {
• var i;
• for(i = 0; i<arr.length; i++) { document.write("<br>array element
•} "+arr[i]); }
• </script>
15
<html><body>script> Fun- JSON object as parameter
//myFunction('{"name":"John","age":30,"car":null}');
function myFunction(s) {
const obj=JSON.parse(s);
document.write("name "+ obj.name+" "+obj.age);
}
</script>
<script src="json2.js"></script>
</body>
</html>
16