JSON

.

 💥JavaScript Object Notation (JSON)

 JSON is a syntax for storing and exchanging data.

   💥What is JSON?

• JSON stands for JavaScript Object Notation
• JSON is a lightweight data-interchange format
• JSON is "self-describing" and easy to understand
• JSON is language independent *

     
 💥Why use JSON?

Since the JSON format is text only, it can easily be sent to and from a server, and used as a data format by any programming language.

 💥Exchanging Data

👉When exchanging data between a browser and a server, the data can only be text.

👉JSON is text, and we can convert any JavaScript object into JSON, and send JSON to the server.

👉We can also convert any JSON received from the server into JavaScript objects.

👉This way we can work with the data as JavaScript objects, with no complicated parsing and translations.

💥Convert a JavaScript object into a JSON string, and send it to the server(Sending Data)
 
     😅<script>
var myObj = { "name":"Abi", "age":11, "city":"Jaffna" };
var myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
</script>



out put: Abi from Jaffna is 11

👉 Convert a string written in JSON format, into a JavaScript object.(Receiving Data)

      😅 <script>

var myJSON = '{ "name":"Abi", "age":31, "city":"New York" }';
var myObj = JSON.parse(myJSON);
document.getElementById("demo").innerHTML = myObj.name;

</script>

out put: Abi


💥JSON  Data types

     In JSON, values must be one of the following data types:

• a string   { "name":"John" } 

• a number  { "age":30 } 

• an object  {"employee":{ "name":"John", "age":30, "city":"New York" }
  } 

• an array  [ "Ford", "BMW", "Fiat" ] 

• a boolean { "sale":true }

• null  { "middlename":null }

 

  JSON values cannot be one of the following data types:

• a function
• a date
• undefined

 

   👉We can access the object values by using dot (.) or bracket ([ ])  notation

   <script>

var myObj, x;
myObj = { "name":"Sutha", "age":30, "car":null };
x = myObj.age;
document.getElementById("demo").innerHTML = x;

</script>

output: 30

   <script>

var myObj, x;
myObj = { "name":"Sutha", "age":30, "car":null };
x = myObj["name"];
document.getElementById("demo").innerHTML = x;

</script>

output: Sutha 


💥 Looping an Object

we can loop through object properties by using the for-in loop and also  use the bracket notation to access the property values

       😅<script>
var myObj = { "name":"John", "age":30, "car":null };
for (x in myObj) {
    document.getElementById("demo").innerHTML += x + "<br>";
}
</script>

output:   name
              age
              car

      😅<script>
var myObj = { "name":"John", "age":30, "car":null };
for (y in myObj) {
    document.getElementById("demo").innerHTML += myObj[y] + "<br>";
}
</script>

output:John
           30
           null
 

 💥Delete object

 

       😅<script>
var myObj, i, x = "";
myObj = {
  "name":"John",
  "age":30,
  "cars": {
    "car1":"Ford",
    "car2":"BMW",
    "car3":"Fiat"
  }
}
delete myObj.cars.car2;

for (i in myObj.cars) {
    x += myObj.cars[i] + "<br>";
}

document.getElementById("demo").innerHTML = x;

</script>

 

output:
              Ford
            Fiat