JSON stands for "JavaScript Object Notation". It is a way of transporting and storing data that follows a specific nomenclature and that can be interpreted by different programming languages to be used in any environment.

The JSON syntax in which data is stored always begins and ends with {}.
Example:

{
"employees":[
 {"firstName":"John", "lastName":"Doe"},
 {"firstName":"Anna", "lastName":"Smith"},
 {"firstName":"Peter", "lastName":"Jones"}
]
}

As we can see, it is a good way to store the data of all employees in any company.

These data are exposed in a "json" file and disclosed through a web address.

In javascript this Json data can be stored in a variable.

  var myJson ='"image": { '+
    ' "src": "Images/Sun.png",'+
  '"name": "sun1",'+
  '"hOffset": 250,'+
  '"vOffset": 250,'+
  '"alignment": "center"'+
 ‘}’

To transform this variable into an object and then be able to manipulate it and display its data, we use "parse" as follows:

<p id="show"></p>
<script type="text/javascript">
var myJson = '{"widget": {'+
 '"debug": "on",'+
 '"window": {'+
  '"title": "Sample Konfabulator Widget",'+
  '"name": "main_window",'+
  '"width": 500,'+
  '"height": 500'+
 '},'+
 '"image": { '+
    ' "src": "Images/Sun.png",'+
  '"name": "sun1",'+
  '"hOffset": 250,'+
  '"vOffset": 250,'+
  '"alignment": "center"'+
 '}'+
'}}';

const myNewJson = JSON.parse(myJson);
document.getElementById("show").innerHTML = myNewJson.widget.image.src; //Images/Sun.png
  document.getElementById("show").innerHTML = myNewJson.widget.window.name;//main_window
</script>

You can also convert an object to JSON with the use of "stringify":

<script type="text/javascript">
var myJson = { "title": "Sample Konfabulator Widget", "name": "main_window", "width": 500 };
// converting to JSON
const obj = JSON.stringify(myJson);

console.log(obj); // {"title":"Sample Konfabulator Widget","name":"main_window","width":500}
</script> 

← Previous Chapter - Next Chapter →