JS - JSON

Introduction

JSON is a data format for transferring data as an alternative to XML. JSON is ligter than XML. The syntax is like mapping.

Program Code

var data = {
  "name": "Lady Gaga",
  "city": "New York",
  "age": 24
}

In the above example, we have JSON data format.

Accessing And Modifying

For accessing JSON data, we use dot operator. For above example, we use

Program Code

var the_name = data.name;
var the_cityy = data.city;
var the_age = data.age;
alert("Name: "+ the_name +"\nCity: "+ the_city +"\nAge: "+ the_age)

Output

Name: Lady Gaga
City: New York
Age: 24

You also use the dot operator for modifying the data.

Program Code

data.name = "Jenifer Lopez";
alert("Name: "+ data.name);

Output

Name: Jenifer Lopez

In the above code, we modify the data name from "Lady Gaga" to "Jenifer Lopez"

Transfering JSON Data Through Ajax

JSON is very suitable for transferring data from client to server. The first step, you encode your data to JSON format, then sending it through AJAX. After it arrived on the server side, then processing it as server code. Here's we will use PHP as server code.

Program Code

<div>Name: <input type="text" id="name"/></div>
<div>City: <input type="text" id="city"/></div>
<input type="button" onclick="sending()" value="Send Data"/>

<script>

function sending(){
  var name = document.getElementById('name').value;
  var city = document.getElementById('city').value;

  var data = {"name":name, "city":city};

  var ajax = new XMLHttpRequest();
  var json_data = JSON.stringify(data);
  ajax.open("GET", "hello.php?data="+ json_data, false);
  ajax.send();
}

</script>

In the above code we use JSON for transferring data - name and city - to server. The process is follows: After you get your data, you change the data format to json data format. Then you use JSON.strigify(json_data_format_here) to formatting it to string literal. You can try that this is a string literal by writing alert(json_data). And the last section is that you let AJAX to handle the transfer process.
On the server side, you need to write this code.

Program Code: hello.php

$json_data = $_GET['data'];

// conver the json data format to associative array
$data = json_decode($json_data);

// get the name and city
$name = $data["name"];
$city = $data["city"];

The above is a code on how to handle json data format from client. The first step, you catch the data value using commong global GET variable. But the data in this stage is till in the form of JSON string, so we need to convert it to PHP array for conveniently handling - here we use json_decode().

Handling JSON Data From Server

It's also convenient to handling the received data from the server. Here's a practical example using PHP. Write this code in hello.php

Program Code: hello.php

$data = {
  "name" => "lady gaga",
  "city" => "new york"
}
$json_data = json_oncode($data);
echo $json_data;

In the above code, you see that the data type is associative array. Yes, JSON and associative array, map or dictionary is same. All of them has feature key value pairs. The firstly, we have data in the format of associative array, then we encode it to JSON format through json_encode. After that we display it using echo - sending to client if requested.
On the client side, the code is:

Program Code

<h1>Name: <span id="name"></span></h1>
<h1>City: <span id="city"></span></h1>
<input type="button" onclick="load()" value="Load JSON Data"/>
<script>

function load(){
  var name = document.getElementById('name');
  var city = document.getElementById('city');

  var ajax = new XMLHttpRequest();
  ajax.send("GET", "hello.php", false);
  var data = eval('('+ ajax.responseText +')');

  name.innerHTML = data.name;
  city.innerHTML = data.city;
}

</script>

JS - JSON