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.
If you have data stored in a JavaScript object, you can convert the object into JSON, and send it to a server:
const myObj = {name: "John", age: 31, city: "New York"};
const myJSON = JSON.stringify(myObj);
window.location = "demo_json.php?x=" + myJSON;
This is a JSON string:
'["Ford", "BMW", "Fiat"]'
Inside the JSON string there is a JSON array literal:
["Ford", "BMW", "Fiat"]
Arrays in JSON are almost the same as arrays in JavaScript.
In JSON, array values must be of type string, number, object, array, boolean or null.
In JavaScript, array values can be all of the above, plus any other valid JavaScript expression, including functions, dates, and undefined.
This is a JSON string:
'{"name":"John", "age":30, "car":null}'
Inside the JSON string there is a JSON object literal:
{"name":"John", "age":30, "car":null}
JSON object literals are surrounded by curly braces {}.
JSON object literals contains key/value pairs.
Keys and values are separated by a colon.
Keys must be strings, and values must be a valid JSON data type:
Each key/value pair is separated by a comma.
It is a common mistake to call a JSON object literal “a JSON object”.
JSON cannot be an object. JSON is a string format.
The data is only JSON when it is in a string format. When it is converted to a JavaScript variable, it becomes a JavaScript object.
A common use of JSON is to exchange data to/from a web server.
When sending data to a web server, the data has to be a string.
You can convert any JavaScript datatype into a string with JSON.stringify().
Imagine we have this object in JavaScript:
const obj = {name: "John", age: 30, city: "New York"};
Use the JavaScript function JSON.stringify() to convert it into a string.
const myJSON = JSON.stringify(obj);
The result will be a string following the JSON notation.
myJSON is now a string, and ready to be sent to a server: Continue reading Javascript JSON.stringify()
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.
Imagine we received this text from a web server:
'{"name":"John", "age":30, "city":"New York"}'
Use the JavaScript function JSON.parse() to convert text into a JavaScript object:
const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');
Make sure the text is in JSON format, or else you will get a syntax error.
Use the JavaScript object in your page: Continue reading Javascript JSON.parse()
In JSON, values must be one of the following data types:
JSON values cannot be one of the following data types:
Both JSON and XML can be used to receive data from a web server.
The following JSON and XML examples both define an employees object, with an array of 3 employees:
{"employees":[
{ "firstName":"John", "lastName":"Doe" },
{ "firstName":"Anna", "lastName":"Smith" },
{ "firstName":"Peter", "lastName":"Jones" }
]}
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>
The JSON syntax is a subset of the JavaScript syntax.
JSON syntax is derived from JavaScript object notation syntax:
This example is a JSON string:
'{"name":"John", "age":30, "car":null}'
It defines an object with 3 properties:
Each property has a value.
If you parse the JSON string with a JavaScript program, you can access the data as an object:
let personName = obj.name;
let personAge = obj.age;
AJAX can be used for interactive communication with a database.
When a user selects a customer in the dropdown list , a function called showCustomer() is executed. The function is triggered by the onchange event:
function showCustomer(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("txtHint").innerHTML = this.responseText;
}
xhttp.open("GET", "getcustomer.php?q="+str);
xhttp.send();
}
The showCustomer() function does the following: Continue reading Javascript AJAX Database Example