{"id":2413,"date":"2023-05-31T22:58:23","date_gmt":"2023-05-31T21:58:23","guid":{"rendered":"https:\/\/bornoe.org\/blog\/?p=2413"},"modified":"2023-11-30T02:08:44","modified_gmt":"2023-11-30T01:08:44","slug":"the-basics-of-json-syntax","status":"publish","type":"post","link":"https:\/\/bornoe.org\/blog\/2023\/05\/the-basics-of-json-syntax\/","title":{"rendered":"The basics of JSON syntax"},"content":{"rendered":"\n<p>JSON (JavaScript Object Notation) is a lightweight and widely-used data interchange format that has become a standard for representing structured data. Its simplicity, human-readability, and compatibility with a variety of programming languages make it a popular choice for data exchange over the web. In this blog post, I will outline the fundamental syntax of JSON and provide some basic examples.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is JSON? <\/h2>\n\n\n\n<p>JSON, short for JavaScript Object Notation, is an open-standard format that uses human-readable text to transmit data in a structured manner. It originated from JavaScript but has since become language-independent, and supported by a wide range of programming languages. A key strength of JSON is the lightweight and easy-to-parse format for representing data, making it easy to integrate with web services, APIs, and data storage.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">JSON syntax overview<\/h2>\n\n\n\n<p>The JSON syntax follows a set of basic rules to ensure the proper structure and formatting of JSON data. Here are the fundamental rules of JSON syntax:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Data types<\/h3>\n\n\n\n<p>JSON supports the following data types.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Strings<\/h4>\n\n\n\n<p>Enclosed within double quotes <code>\"\"<\/code> and represent sequences of characters.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">\"Hello, World!\"<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Numbers<\/h4>\n\n\n\n<p>Integer or floating-point values.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">42\n3.14159<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Booleans<\/h4>\n\n\n\n<p>Represented by <code>true<\/code> or <code>false<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">true<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Null<\/h4>\n\n\n\n<p>Represents the absence of a value.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">null<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Arrays<\/h4>\n\n\n\n<p>Ordered lists of values enclosed within square brackets <code>[]<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">[1, 2, 3]<\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Objects<\/h4>\n\n\n\n<p>Unordered collections of key-value pairs enclosed within curly braces <code>{}<\/code>.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{ \"name\": \"John\", \"age\": 25, \"isStudent\": true }<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Delimiters<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Objects are enclosed within curly braces <code>{}<\/code>.<\/li>\n\n\n\n<li>Arrays are enclosed within square brackets <code>[]<\/code>.<\/li>\n\n\n\n<li>Strings are enclosed within double quotes <code>\"\"<\/code>.<\/li>\n\n\n\n<li>Key-value pairs within objects are separated by commas <code>,<\/code>.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Escape characters<\/h3>\n\n\n\n<p>Certain characters have special meanings in JSON and need to be escaped when used within strings. The backslash <code>\\<\/code> is used to escape characters.<\/p>\n\n\n\n<p>Here are the characters that need to be escaped in JSON:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Double Quote (<code>\"<\/code>): To include a double quote within a string, it should be escaped as <code>\\\"<\/code>.<\/li>\n\n\n\n<li>Backslash (<code>\\<\/code>): To include a backslash within a string, it should be escaped as <code>\\\\<\/code>.<\/li>\n\n\n\n<li>Forward Slash (<code>\/<\/code>): Although it is not required to escape forward slashes in JSON, it can be escaped as <code>\\\/<\/code> to avoid potential issues when the JSON is used within HTML <code>&lt;script&gt;<\/code> tags.<\/li>\n\n\n\n<li>Backspace (<code>\\b<\/code>): Represented as <code>\\b<\/code>, this is an escape sequence for the backspace character.<\/li>\n\n\n\n<li>Form Feed (<code>\\f<\/code>): Represented as <code>\\f<\/code>, this is an escape sequence for the form feed character.<\/li>\n\n\n\n<li>Newline (<code>\\n<\/code>): Represented as <code>\\n<\/code>, this is an escape sequence for the newline character.<\/li>\n\n\n\n<li>Carriage Return (<code>\\r<\/code>): Represented as <code>\\r<\/code>, this is an escape sequence for the carriage return character.<\/li>\n\n\n\n<li>Tab (<code>\\t<\/code>): Represented as <code>\\t<\/code>, this is an escape sequence for the tab character.<\/li>\n<\/ul>\n\n\n\n<p>Escaping these characters is necessary to ensure they are treated as literal characters within the string and do not interfere with the JSON syntax or structure. When parsing this JSON data, the escape characters will be removed, and the resulting string values will contain the desired characters.<\/p>\n\n\n\n<p>Here&#8217;s an example that demonstrates the usage of escaped characters in JSON:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"name\": \"John Doe\",\n  \"description\": \"He said, \\\"Hello, World!\\\"\",\n  \"path\": \"C:\\\\Documents\\\\Files\"\n}<\/pre>\n\n\n\n<p>In this example the double quotes (<code>\"<\/code>) within the <code>description<\/code> value are escaped using a backslash (<code>\\\"<\/code>). The backslashes (<code>\\<\/code>) within the <code>path<\/code> value are also escaped using a backslash (<code>\\\\<\/code>).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Whitespace<\/h3>\n\n\n\n<p>JSON allows the use of whitespace characters (spaces, tabs, and line breaks) outside of strings. Whitespace is optional and used to enhance readability. It does not affect the structure of the JSON data.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The basic syntax of objects<\/h2>\n\n\n\n<p>JSON objects are enclosed in curly braces <code>{}<\/code> and consist of key-value pairs. In JSON objects, each key is followed by a colon <code>:<\/code> which separates it from its corresponding value. The value can be of any JSON data type, including objects or arrays. <\/p>\n\n\n\n<p>The syntax for a key-value pair is as follows:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>\"key\": value<\/code><\/pre>\n\n\n\n<p>The keys must be strings and are followed by a colon <code>:<\/code> to separate them from their corresponding values. Multiple key-value pairs are separated by commas. The syntax for an object is as follows:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>{\n  \"key1\": value1,\n  \"key2\": value2,\n  ...\n}<\/code><\/pre>\n\n\n\n<p>JSON allows nesting objects and arrays within one another, allowing for complex and hierarchical data structures. Objects can contain arrays, and arrays can contain objects or other arrays.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Examples of JSON objects<\/h3>\n\n\n\n<p>JSON objects consist of key-value pairs enclosed within curly braces ({}). Each key is a string, followed by a colon (:), and the corresponding value. Objects can have any number of key-value pairs and can include other JSON data types as values, such as strings, numbers, booleans, null, arrays, or even nested objects.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Simple object<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">{\n  \"name\": \"John Doe\",\n  \"age\": 30,\n  \"city\": \"New York\"\n}<\/pre>\n\n\n\n<p>In this example, we have a JSON object representing a person. It includes key-value pairs for &#8220;name&#8221; with a value of &#8220;John Doe&#8221;, &#8220;age&#8221; with a value of 30, and &#8220;city&#8221; with a value of &#8220;New York&#8221;.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Nested object<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\">{ \n  \"name\": \"Jane\", \n  \"age\": 30, \n  \"address\": { \n               \"street\": \"123 Main St\", \n               \"city\": \"San Francisco\" \n             } \n}<\/pre>\n\n\n\n<p>This JSON object includes a nested object called &#8220;address&#8221; that contains additional properties like street and city.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Object containing an array<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>{ <\/code>\n  <code>\"name\": \"Mike\", <\/code>\n  <code>\"hobbies\": [<\/code>\n               <code>\"reading\", <\/code>\n               <code>\"painting\", <\/code>\n                <code>\"hiking\"<\/code>\n             <code>] <\/code>\n<code>}<\/code><\/pre>\n\n\n\n<p>In this example, the JSON object includes an array of hobbies as one of its properties.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Object containing a null value<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>{ <\/code>\n  <code>\"name\": \"Emily\", <\/code>\n  <code>\"age\": null, <\/code>\n  <code>\"city\": \"London\" <\/code>\n<code>}<\/code><\/pre>\n\n\n\n<p>This JSON object demonstrates the usage of a null value for the age property.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Object containing a boolean<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>{<\/code>\n  <code>\"name\": \"Alex\", <\/code>\n  <code>\"isStudent\": true <\/code>\n<code>}<\/code><\/pre>\n\n\n\n<p>Here, the JSON object includes a boolean property indicating whether the person is a student or not.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">The basic syntax of arrays<\/h2>\n\n\n\n<p>JSON arrays are ordered collections of values, enclosed in square brackets <code>[]<\/code>. The values within an array can be of any JSON data type, including objects, arrays, numbers, strings, booleans, or null. Multiple values within an array are separated by commas. The syntax for an array is as follows:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>[ value1, value2, ... ]<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">JSON array examples<\/h3>\n\n\n\n<p>JSON arrays provide a way to organize and store multiple values in a specific order. They are enclosed within square brackets ([]), and the values within the array are separated by commas (,). Arrays can contain any JSON data type, including numbers, strings, booleans, null, objects, or even nested arrays.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Array of numbers<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>[1, 2, 3, 4, 5]<\/code><\/pre>\n\n\n\n<p>This JSON array represents a list of numbers from 1 to 5.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Array of strings: <\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>[\"apple\", \"banana\", \"orange\"]<\/code><\/pre>\n\n\n\n<p>This example represents a JSON array containing three string values: &#8220;apple&#8221;, &#8220;banana&#8221;, and &#8220;orange<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Array of objects<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>[<\/code>\n  <code>{<\/code>\n    <code>\"name\": \"John\", <\/code>\n  <code>  \"age\": 25}, <\/code>\n  <code>{<\/code>\n    <code>\"name\": \"Jane\", <\/code>\n    <code>\"age\": 30}, <\/code>\n  <code>{<\/code>\n    <code>\"name\": \"Mike\", <\/code>\n    <code>\"age\": 35<\/code>\n  <code>} <\/code>\n<code>]<\/code><\/pre>\n\n\n\n<p>This JSON array consists of multiple objects, where each object represents a person with a name and age.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Nested arrays<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>[\n  [1, 2, 3], \n  [4, 5, 6], \n  [7, 8, 9]\n]<\/code><\/pre>\n\n\n\n<p>Here, the JSON array contains three nested arrays, each representing a row of numbers.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Mixed array<\/h4>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>[1, \"apple\", true, null]<\/code><\/pre>\n\n\n\n<p>This example demonstrates a JSON array that includes elements of different data types, such as a number, string, boolean, and null.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JSON (JavaScript Object Notation) is a lightweight and widely-used data interchange format that has become a standard for representing structured data. Its simplicity, human-readability, and compatibility with a variety of programming languages make it a popular choice for data exchange over the web. In this blog post, I will outline the fundamental syntax of JSON [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2422,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-2413","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/posts\/2413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/comments?post=2413"}],"version-history":[{"count":13,"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/posts\/2413\/revisions"}],"predecessor-version":[{"id":2442,"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/posts\/2413\/revisions\/2442"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/media\/2422"}],"wp:attachment":[{"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/media?parent=2413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/categories?post=2413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bornoe.org\/blog\/wp-json\/wp\/v2\/tags?post=2413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}