To work with the JSON format, JavaScript has a global JSON object. The JSON object has two methods: stringify() and parse() . Apart from these two methods, it does not contain any additional functionality.
stringify() methodThe stringify() method converts a JavaScript value into a JSON string.
Conversion Features:
- An undefined value, function, or symbol encountered during conversion will either be omitted (if found in the object) or converted to null (if found in the array).
- Prototype members and non-enumerable properties are ignored.
- The array defines a set of object properties that will be included in the JSON string. The array values are strings corresponding to the names of the properties of the object being converted.
- The function allows you to replace the values of object properties in a JSON string. The function must contain two parameters: the property name and the property value. The property name is a string. The function must return the new property value.
- If the value of the parameter is null , then the JSON string will include all properties of the object.
- The number indicates the number of spaces used as indentation for each nesting level. Each subsequent level of nesting is supplemented with new indents. For example, if the number 2 is used as the parameter value, then at the first nesting level the indentation will be two spaces, at the next nesting level the indentation will be 4 spaces, etc. The maximum number of spaces that can be specified is 10. If you specify a larger number , it will automatically decrease to 10.
- The line specifies the character used as indentation for each nesting level. The line length is limited to 10 characters; if you specify a line longer, it is truncated to 10 characters. Using a line also allows you to use a tab ("\t") as indentation. Each subsequent nesting level is supplemented with new indentation characters. For example, if the symbol - (hyphen) is specified as the parameter value, then at the first nesting level one hyphen will be used as indentation, at the next nesting level 2 hyphens will be used, etc.
JSON string.
Example let person = ( name: "Gomer", age: 40, work: ( place: "Nuclear Plant", location: "Springfield" ) ) // Example with one parameter console.log(JSON.stringify(person)); // "("name":"Homer","age":40,"work":("place":"Nuclear Plant","location":"Springfield"))" // Example with two parameters (array ) console.log(JSON.stringify(person, ["name", "age"])); // "("name":"Gomer","age":40)" // Example with two parameters (function) console.log(JSON.stringify(person, function (key, value) ( switch (key) ( case "name": return "Bart"; case "age": return 10; case "work": return undefined; default: return value; ) ))); // "("name":"Bart","age":10)" // Example with three parameters console.log(JSON.stringify(person, null, 2)); /* ( * "name": "Homer", * "age": 40, * "work": ( * "place": "Nuclear Plant", * "location": "Springfield" * ) * ) */ Method parse()The parse() method converts the JSON string into the corresponding JavaScript value.
Conversion Features:
- If an undefined value is encountered in the JSON string during conversion, it will be omitted (not included in the result).
The corresponding JavaScript value (primitive value, object, or array).
Example JSON.parse("()"); // () JSON.parse("true"); // true JSON.parse(""); // JSON.parse("null"); // nullSurely you have ever heard of JSON. What is it? What can it do and how to use it?
In this tutorial we will cover the basics of JSON and cover the following points:
- What is JSON?
- What is JSON used for?
- How to create a JSON string?
- A simple example of a JSON string.
- Let's compare JSON and XML.
- How to work with JSON in JavaScript and PHP?
JSON is a simple, text-based way to store and transmit structured data. With a simple syntax, you can easily store anything from a single number to strings, arrays, and objects in plain text. You can also link arrays and objects together to create complex data structures.
Once the JSON string is created, it is easy to send it to another application or to another location on the network because it is plain text.
JSON has the following advantages:
- It's compact.
- Its sentences are easy to read and compose by both humans and computers.
- It can be easily converted into a data structure for most programming languages (numbers, strings, booleans, arrays, etc.)
- Many programming languages have functions and libraries for reading and creating JSON structures.
The name JSON stands for JavaScript Object Notation. As the name suggests, it is based on a way of defining objects (much like creating associative arrays in other languages) and arrays.
What is JSON used for?The most common common use of JSON is to send data from the server to the browser. Typically, JSON data is delivered using AJAX, which allows the browser and server to communicate without having to reload the page.
You can also use JSON to send data from the browser to the server by passing a JSON string as a parameter to GET or POST requests. But this method is less common, since data transfer through AJAX requests can be simplified. For example, the product ID may be included in the URL as part of a GET request.
The jQuery library has several methods, such as getJSON() and parseJSON(), that make it easy to retrieve data using JSON through AJAX requests.
How to create a JSON string?There are a few basic rules for creating a JSON string:
- The JSON string contains either an array of values or an object (an associative array of name/value pairs).
- Array is enclosed in square brackets ([ and ]) and contains a comma-separated list of values.
- An object is enclosed in curly braces (( and )) and contains a comma-separated list of name/value pairs.
- name/value pair consists of the field name enclosed in double quotation marks, followed by a colon (:) and the field value.
- Meaning in an array or object there can be:
- Number (integer or floating point)
- String (in double quotes)
- Boolean value (true or false)
- Another array (enclosed in square brackets)
- Another object (enclosed in curly braces)
- null value
To include double quotes in a string, you need to use a backslash: \" . As with many programming languages, you can put control characters and hex codes in a string by preceding them with a backslash. See the JSON website for details.
Simple JSON string exampleBelow is an example of ordering in JSON format:
( "orderID": 12345, "shopperName": "Vanya Ivanov", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "Super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], "orderCompleted": true )
Let's look at the line in detail:
- We create an object using curly braces (( and )).
- The object has several name/value pairs: "orderID": 12345 A property with the name "orderId" and an integer value 12345 "shopperName": "Vanya Ivanov" a property with the name "shopperName" and the string value "Vanya Ivanov" "shopperEmail": " [email protected]" A property named "shopperEmail" with a string value " [email protected]" "contents": [ ... ] A property named "contents" whose value is an array "orderCompleted": true A property named "orderCompleted" and the boolean value true
- There are 2 objects in the "contents" array representing individual items in the order. Each object contains 3 properties: productID , productName , and quantity .
By the way, since JSON is based on declaring JavaScript objects, you can quickly and easily make the above JSON string a JavaScript object:
var cart = ( "orderID": 12345, "shopperName": "Vanya Ivanov", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "Super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], "orderCompleted": true );
Comparison of JSON and XMLIn many ways, you can think of JSON as an alternative to XML, at least in the web application space. The concept of AJAX was originally based on the use of XML to transfer data between the server and the browser. But in recent years, JSON has become increasingly popular for transporting AJAX data.
While XML is a proven technology that is used in a fair number of applications, JSON has the advantage of being a more compact and easier-to-recognize data format.
This is what the above example object in XML would look like:
orderID 12345 shopperName Vanya Ivanov shopperEmail [email protected] contents productID 34 productName Super product quantity 1 productID 56 productName Miracle product quantity 3 orderCompleted true
The XML version is significantly larger. In reality it is 1128 characters long, while the JSON version is only 323 characters long. The XML version is also quite difficult to understand.
Of course, this is a radical example. And it is possible to create a more compact XML record. But even it will be significantly longer than the JSON equivalent.
Working with a JSON string in JavaScriptJSON has a simple format, but creating a JSON string manually is quite tedious. Additionally, you often need to take a JSON string, convert its contents into a variable that can be used in code.
Most programming languages have tools to easily convert variables to JSON strings and vice versa.
Creating a JSON string from a variableJavaScript has a built-in JSON.stringify() method that takes a variable and returns a JSON string representing its contents. For example, let's create a JavaScript object that contains the order information from our example, and then create a JSON string from it:
var cart = ( "orderID": 12345, "shopperName": "Vanya Ivanov", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "Super product", "quantity": 1 ), ( "productID": 56, "productName": "Miracle product", "quantity": 3 ) ], "orderCompleted": true ); alert (JSON.stringify(cart));
This code will produce:
Note that the JSON.stringify() method returns a JSON string without spaces. It is more difficult to read, but it is more compact for transmission over the network.
There are several ways to parse a JSON string in JavaScript, but the safest and most reliable is to use the built-in JSON.parse() method. It receives a JSON string and returns a JavaScript object or array that contains the data. For example:
var jsonString = " \ ( \ "orderID": 12345, \ "shopperName": "Vanya Ivanov", \ "shopperEmail": " [email protected]", \ "contents": [ \ ( \ "productID": 34, \ "productName": "Super product", \ "quantity": 1 \), \ ( \ "productID": 56, \ "productName": "Miracle goods", \"quantity": 3\ ) \ ], \"orderCompleted": true \ ) \"; var cart = JSON.parse(jsonString); alert(cart.shopperEmail); alert(cart.contents.productName);
We created a jsonString variable that contains the JSON string of our example order. We then pass this string to the JSON.parse() method, which creates an object containing the JSON data and stores it in the cart variable. All that remains is to check by displaying the properties of the shopperEmail object and productName of the contents array.
As a result, we will get the following output:
In a real application, your JavaScript code would receive the order as a JSON string in an AJAX response from the server script, pass the string to the JSON.parse() method, and then use the data to display it on the user's page.
JSON.stringify() and JSON.parse() have other capabilities, such as using callback functions to custom convert certain data. Such options are very useful for converting various data into proper JavaScript objects.
Working with a JSON string in PHPPHP, like JavaScript, has built-in functions for working with JSON strings.
Creating a JSON string from a PHP variableThe json_encode() function takes a PHP variable and returns a JSON string representing the contents of the variable. Here is our order example, written in PHP:
This code returns exactly the same JSON string as in the JavaScript example:
("orderID":12345,"shopperName":"Vanya Ivanov","shopperEmail":" [email protected]","contents":[("productID":34,"productName":"Super product","quantity":1),("productID":56,"productName":"Miracle product","quantity": 3)],"orderCompleted":true)
In a real application, your PHP script will send this JSON string as part of an AJAX response to the browser, where the JavaScript code, using the JSON.parse() method, will parse it back into a variable for display on the user's page.
You can pass various flags as the second argument to the json_encode() function. With their help, you can change the principles of encoding the contents of variables into a JSON string.
Create a variable from a JSON stringTo convert a JSON string into a PHP variable, use the json_decode() method. Let's replace our example for JavaScript with the JSON.parse() method with PHP code:
As with JavaScript, this code will produce:
[email protected] Miracle product
By default, the json_decode() function returns JSON objects as PHP objects. There are generic PHP objects of the stdClass class. That's why we use -> to access the properties of the object in the example above.
If you need a JSON object as an associated PHP array, you need to pass true as the second argument to the json_decode() function. For example:
$cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
"; echo $cart["contents"]["productName"] . "
";
This code will produce the same output:
[email protected] Miracle product
You can also pass other arguments to the json_decode() function to specify the recursion depth and how to handle large integers.
ConclusionAlthough JSON is easy to understand and use, it is a very useful and flexible tool for transferring data between applications and computers, especially when using AJAX. If you are planning to develop an AJAX application, then there is no doubt that JSON will become an essential tool in your workshop.
JSON syntax is a subset of JavaScript syntax.
JSON syntax rulesThe JSON syntax is derived from the JavaScript notation object syntax:
- Data in name/value pairs
- Data separated by commas
- Curly braces hold objects
- Square brackets hold arrays
JSON data is written as name/value pairs.
A name/value pair consists of the field name (in double quotes) followed by a colon, followed by the value:
example"firstName":"John"
JSON names require double quotes. There are no JavaScript names.
JSON valuesJSON values can be:
- Row (integer or floating point)
- String (in double quotes)
- Boolean (true or false)
- Array (in square brackets)
- Object (in curly braces)
JSON objects are written in curly braces.
Just like JavaScript, JSON objects can contain multiple name/value pairs:
example("firstName":"John", "lastName":"Doe")
JSON ArraysJSON arrays are written in square brackets.
Just like JavaScript, a JSON array can contain multiple objects:
example"employees":[
("firstName":"Peter","lastName":"Jones")
]
In the example above, the "employees" object is an array containing three objects. Each object represents a person's record (with first and last name).
JSON uses JavaScript SyntaxBecause JSON syntax is derived from JavaScript object notation, very little additional software is needed to work with JSON in JavaScript.
With JavaScript you can create an array of objects and assign data to it like this:
examplevar employees = [
("firstName":"John", "lastName":"Doe"),
("firstName":"Anna", "lastName":"Smith"),
("firstName":"Peter","lastName": "Jones")
];
The first entry into an array of JavaScript objects can be obtained as follows:
You can also get it like this:
The data can be changed as follows:
It can also be changed as follows:
In the next chapter, you will learn how to convert JSON text into a JavaScript object.
files in JSON format- The file type for JSON files is ".json"
- MIME type for JSON text "application/json"
What is JSON and what can it do? In this article, you will learn how to use JSON to easily work with data. We will also look at how to work with JSON using PHP and JavaScript.
If you've developed websites or web applications in general, chances are you've heard of JSON, at least in passing. But what exactly does JSON mean? What can this data format do and how can it be used?
In this article we will learn the basics of working with the json format. We will follow the following topics:
- What is JSON format?
- How to create JSON strings?
- Simple example of JSON data
- Comparing JSON with XML
Let's start!
What is JSON format?JSON is a simple, text-based way to store and transmit structured data. Using a simple syntax, you can easily store both simple numbers and strings, as well as arrays and objects, using nothing more than text. You can also link objects and arrays, which allows you to create complex data structures.
Once the JSON string is created, it can be easily sent to any application or computer since it is just text.
JSON has many advantages:
- It's compact
- It is human-readable and easy to read by computers
- It can be easily converted into software formats: numeric values, strings, boolean format, null value, arrays and associative arrays.
- Almost all programming languages have functions that allow you to read and create json data format.
Literally, the abbreviation JSON stands for JavaScript Object Notation. As described earlier, this format is based on creating objects, something similar to associative arrays in other programming languages.
What purposes is JSON used for?Most of all, json is used to exchange data between javascript and server side (php). In other words, for ajax technology. This is very convenient when you are passing multiple variables or entire data arrays.
Here's what it looks like in an example:
This is how the image is enlarged without reloading the page in the browser. This is very convenient when we need to receive partial data, or transfer a small amount of information to the server.
Everyone's favorite jQuery has the getJSON() and parseJSON() functions, which help you work with the format through ajax requests.
How to create JSON strings?
Below are the basic rules for creating JSON strings:
- The JSON string contains both an array of values and an object (an associative array with name/value pairs).
- The array must be wrapped in square brackets, [ and ], and can contain a list of values that are separated by a coma.
- Objects are wrapped using curly arms, ( and ), and also contain coma-separated name/value pairs.
- Name/value pairs consist of the field name (in double quotes) followed by a colon (:) followed by the value of the field.
- The values in an array or object can be:
- Numeric (integer or dotted fraction)
- Strings (wrapped in double quotes)
- Boolean (true or false)
- Other arrays (wrapped in square brackets [ and ])
- Other objects (wrapped in curly arms ( and ))
- Null value
Important! If you use double quotes in values, escape them with a backslash: \". You can also use hex encoded characters, just as you do in other programming languages.
Simple example of JSON dataThe following example shows how you can save data in the “cart” of an online store using the JSON format:
("orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": true )
Let's break this data down piece by piece:
Finally, since JSON is identical to objects in JavaScript, you can easily take this example and create a JavaScript object from it:
var cart = ("orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": true );
Comparing JSON with XMLIn most cases, you'll think of JSON as an alternative to XML - at least within web applications. The Ajax concept originally uses XML to exchange data between the server and the browser, but in recent years JSON has become more popular for transmitting ajax data.
Although XML is a tried and tested technology that is used by many applications, the advantages of the JSON format are that it is more compact and easier to write and read.
Here is the above JSON example, only rewritten in XML format:
orderID 12345 shopperName John Smith shopperEmail [email protected] contents productID 34 productName SuperWidget quantity 1 productID 56 productName WonderWidget quantity 3 orderCompleted true
As you can see, it is several times longer than JSON. In fact, this example is 1128 characters long, while the JSON version is only 323 characters. The XML version is also more difficult to read.
Naturally, one cannot judge by just one example, but even small amounts of information take up less space in the JSON format than in XML.
How to work with JSON via PHP and JS?Now we come to the most interesting part - the practical side of the JSON format. First, let's pay tribute to JavaScript, then we'll see how you can manipulate JSON through PHP.
Creating and Reading JSON Format Using JavaScript
Even though the JSON format is simple, it is difficult to write manually when developing web applications. Moreover, you often have to convert JSON strings into variables and then use them in your code.
Fortunately, many programming languages provide tools for working with JSON strings. The main idea of which:
To create JSON strings, you start with variables containing some values, then pass them through a function that turns the data into a JSON string.
Reading JSON strings, you start with a JSON string containing certain data, pass the string through a function that creates variables containing the data.
Let's see how this is done in JavaScript.
Creating a JSON string from a JavaScript variableJavaScript has a built-in method, JSON.stringify(), which takes a javascript variable and returns a json string representing the contents of the variable. For example, let's use a previously created object and convert it to a JSON string.
var cart = ("orderID": 12345, "shopperName": "John Smith", "shopperEmail": " [email protected]", "contents": [ ( "productID": 34, "productName": "SuperWidget", "quantity": 1 ), ( "productID": 56, "productName": "WonderWidget", "quantity": 3 ) ], "orderCompleted": true ); alert (JSON.stringify(cart));
This is what will appear on the screen:
("orderID":12345,"shopperName":"John Smith","shopperEmail":" [email protected]", "contents":[("productID":34,"productName":"SuperWidget","quantity":1), ("productID":56,"productName":"WonderWidget","quantity":3) ], "orderCompleted":true)
Note that JSON.stringify() outputs JSON strings without spaces. It's difficult to read, but it's more compact, which is important when sending data.
Creating a JavaScript variable from a JSON stringThere are several ways to parse JSON strings, the most acceptable and safe is using the JSON.parse() method. It takes a JSON string and returns a JavaScript object or array containing the JSON data. Here's an example:
var jsonString = " \ ( \ "orderID": 12345, \ "shopperName": "John Smith", \ "shopperEmail": " [email protected]", \ "contents": [ \ ( \ "productID": 34, \ "productName": "SuperWidget", \ "quantity": 1 \), \ ( \ "productID": 56, \ "productName": " WonderWidget", \"quantity": 3\ ) \ ], \"orderCompleted": true \ ) \"; var cart = JSON.parse(jsonString); alert(cart.shopperEmail); alert(cart.contents.productName);
Here we created a variable, jsonString, which contains the JSON string from the previously provided examples. Then we passed this string through JSON.parse() to create an object containing JSON data, which was stored in the cart variable. Finally, we check for data availability and display some information using the alert modal window.
The following information will be displayed:
In a real web application, your JavaScript code should receive a JSON string as a response from the server (after sending an AJAX request), then parse the string and display the cart contents to the user.
Creating and reading JSON format using PHP
PHP, like JavaScript, has functions that allow you to convert variables into JSON format, and vice versa. Let's look at them.
Creating a JSON string from a PHP variableJson_encode() takes a PHP variable and returns a JSON string representing the variable's data. Here is our example of a “cart” written in PHP:
This code produces exactly the same result as the JavaScript example - a valid JSON string representing the contents of the variables:
("orderID":12345,"shopperName":"John Smith","shopperEmail":" [email protected]","contents":[("productID":34,"productName":"SuperWidget","quantity":1),("productID":56,"productName":"WonderWidget","quantity":3) ],"orderCompleted":true)
In reality, your PHP script should send a JSON string as a response to an AJAX request, where JavaScript will use JSON.parse() to turn the string into variables.
In the json_encode() function, you can specify additional parameters that allow you to convert some characters to hex.
Creating a PHP variable from a JSON stringSimilar to the above, there is a json_decode() function that allows you to decode JSON strings and put the contents into variables.
As with JavaScript, this code will output the following:
[email protected] WonderWidget
By default, json_decode() returns JSON objects as PHP objects. Similar to regular syntax, we use -> to access the properties of an object.
If you later want to use the data as an associative array, simply pass the second parameter true to the json_decode() function. Here's an example:
$cart = json_decode($jsonString, true); echo $cart["shopperEmail"] . "
"; echo $cart["contents"]["productName"] . "
";
This produces the same result:
[email protected] WonderWidget
You can also pass additional arguments to the json_decode() function to determine the processing of large numbers and recursion.
In conclusion about the JSON formatIf you are going to create a web application using Ajax technology, you will certainly use the JSON format for exchanging data between the server and the browser.
We've released a new book, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make Them Fall in Love with Your Brand.
JSON is a text-based data exchange format based on a multi-paradigm programming language. Its main purpose is to store and transmit a structured flow of information.
By using simple rules for constructing characters in JavaScript, a person can provide an easy and reliable way to store any kind of information, be it a simple number, entire strings, or a huge number of different objects expressed in plain text.
In addition, the JSON format is used to combine objects and data structures into a set of components, thereby forming software units that allow you to store and process complex records consisting of several variables of different types.
Once the file is created, the lines it contains are quite easy to redirect to another location on the Network through any data path. This is because the string is plain text.
What does JSON mean?Although it can be used in almost all scripting languages, its name refers to JavaScript. The tool has the following advantages:
In the vast majority of cases, the JSON format is used to work on transferring information from the server to the browser. This process usually occurs in the background between the browser and the web server, and delivery is carried out using AJAX. This is due to the fact that during the data delivery process there is no need to reload the page.
It works according to the following scenario:
All this happens in a matter of milliseconds. However, if JavaScript is disabled on your computer for some reason, the web page will not load or will display errors.
How the JSON format worksIn JSON, data types are divided into several categories: simple and complex. The first type includes, first of all, text strings and numbers, the second - objects. In total, there are six main types:
Spaces between characters are allowed if they are used between syntactic units. Several symbols are used for this: the usual indentation, horizontal text tabs, and a forward slash.
How to open JSON formatThe text data exchange format can be represented in popular encoding standards, which make it possible to store and transmit Unicode characters more compactly. In particular, the default here is UTF-8. UTF-16 and UTF-32 can also be used. Their use is determined by the fact that all three standards support the entire character set.
But, if they are escaped (not quoted) to be used as a regular expression, they can be written to represent characters in additional planes using UTF-16.
The easiest way to open JSON format is to use Notepad on PC. To do this, you need to create and open a new text document, select “File” in the upper left corner, then “Open”.
Having found the desired document, click on the Explorer “Open” button.
The document will open and be available for viewing and editing.
In addition, there are third-party programs for opening the JSON format. Among them are Altova XMLSpy, Notepad++, Komodo Edit, Sublime Text, etc.
How to create a fileThe JSON format is usually used for working (storing and using) service information. Usually this is a staffing table that neither the developer nor the audience of the web resource should see.
There are several ways to create a file with the appropriate extension. First of all, this can be done using a regular text editor, which is part of the Microsoft Windows operating system. To do this, you need to open Notepad, paste the appropriate code and save the document in the usual and only available extension. After this, you need to change it to the desired option.
The second method involves using third-party services. The most popular is JSON Editor Online. It is much more convenient than the Notepad option. The service interface is presented in the form of two work zones.
In the first zone, the actual work of generating data takes place; in the second zone, tools for this are located. After the creation process is completed, you need to click on the “Save” button and select how to save the result: to disk or online.
As already noted, using the online service is much more convenient than Notepad. This is due to the fact that the service automatically detects syntax errors during operation and highlights them so that the user can notice omissions and correct them immediately.
Loading...
