Javascript object notation (JSON) is used as a standardized way to exchange and store data. Data can be formatted as a valid JSON string and then parsed into a
Javascript object
using built in Javascript functions. It is a great way of moving a lot of data from the server-side to the client side (or client to server) while still being easily able to understand and organize is once it has been transmitted especial when making use of
AJAX techniques
.
Converting your PHP array into a valid JSON string
To convert a PHP array into a JSON string, you can make use of the built in function json_encode(). This function takes an array as an argument and outputs a valid JSON string that can then be used in Javascript.
Converting an
associative array
into a JSON string (example):
This will output the following JSON string:
This string can now be used in Javascript.
As another example, let's create a more complicated
multi-dimensional array
and convert it into a JSON string:
This will output the following JSON string:
You can also include regular
indexed arrays
into your array to be encoded:
This will output the following JSON string:
Converting your JSON string into a Javascript object
Once you have acquired your JSON string in Javascript sent from the server through PHP, you can use the JSON.parse() method to convert it into a
Javascript object
from which you can easily access your data.
The JSON.parse() method takes a string as an argument, this string must be a valid JSON string or it will throw an exception. It will return a Javascript object that can then be stored in a variable.
As an example, say we had the following valid JSON string acquired from the server through PHP:
To convert it into a Javascript object, we'll use the JSON.parse() method and store the result in a variable from which we'll access the data.
This will output the following:
Full example with PHP and Javascript
For this example we'll be creating an associative array in PHP which will be converted into a JSON string, to acquire the string in Javascript we'll use an
Here is a JavaScript on the client, using an AJAX call to request the PHP file from the example above:
Example
Use JSON.parse() to convert the result into a JavaScript object:
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
xmlhttp.open("GET", "demo_file.php");
xmlhttp.send();
PHP Array
Arrays in PHP will also be converted into JSON when using the PHP function json_encode():
PHP file
$myArr = array("John", "Mary", "Peter", "Sally");
$myJSON = json_encode($myArr);
echo $myJSON;
?>
The Client JavaScript
Here is a JavaScript on the client, using an AJAX call to request the PHP file from the array example above:
Example
Use JSON.parse() to convert the result into a JavaScript array:
var xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj[2];
}
xmlhttp.open("GET", "demo_file_array.php", true);
xmlhttp.send();
PHP Database
PHP is a server side programming language, and can be used to access a database.
Imagine you have a database on your server, and you want to send a request to it from the client where you ask for the 10 first rows in a table called "customers".
On the client, make a JSON object that describes the numbers of rows you want to return.
Before you send the request to the server, convert the JSON object into a string and send it as a parameter to the url of the PHP page: