Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p><strong>JSON (JavaScript Object Notation) is a lightweight format that is used for data interchanging.</strong> It is based on a subset of JavaScript language (the way objects are built in JavaScript). As <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON" rel="noreferrer">stated in the MDN</a>, some JavaScript is not JSON, and some JSON is not JavaScript.</p> <p>An example of where this is used is web services responses. In the 'old' days, web services used XML as their primary data format for transmitting back data, but since JSON appeared (<em>The JSON format is specified in <a href="http://tools.ietf.org/html/rfc4627" rel="noreferrer">RFC 4627</a> by Douglas Crockford</em>), it has been the preferred format because it is much more <strong>lightweight</strong></p> <p>You can find a lot more info on the official <a href="http://www.json.org/" rel="noreferrer">JSON web site</a>.</p> <p>JSON is built on two structures:</p> <ul> <li>A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.</li> <li>An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.</li> </ul> <hr> <h2>JSON Structure</h2> <p><br/><br/></p> <p><a href="http://www.json.org/object.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/VHjrV.gif" alt="JSON Object diagram"></a><br/><br/> <a href="http://www.json.org/array.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/OCsS0.gif" alt="JSON Array diagram"></a><br/><br/> <a href="http://www.json.org/value.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/7zOHB.gif" alt="JSON Value diagram"></a><br/><br/> <a href="http://www.json.org/string.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/pzAPZ.gif" alt="JSON String diagram"></a><br/><br/> <a href="http://www.json.org/number.gif" rel="noreferrer"><img src="https://i.stack.imgur.com/EK6wD.gif" alt="JSON Number diagram"></a><br/><br/></p> <p>Here is an example of JSON data:</p> <pre><code>{ "firstName": "John", "lastName": "Smith", "address": { "streetAddress": "21 2nd Street", "city": "New York", "state": "NY", "postalCode": 10021 }, "phoneNumbers": [ "212 555-1234", "646 555-4567" ] } </code></pre> <hr> <h1>JSON in JavaScript</h1> <p><strong>JSON (in Javascript) is a string!</strong></p> <p>People often assume all Javascript objects are JSON and that JSON is a Javascript object. This is incorrect.</p> <p>In Javascript <code>var x = {x:y}</code> is <strong>not JSON</strong>, this is a <strong>Javascript object</strong>. The two are not the same thing. The JSON equivalent (represented in the Javascript language) would be <code>var x = '{"x":"y"}'</code>. <code>x</code> is an object of type <strong>string</strong> not an object in it's own right. To turn this into a fully fledged Javascript object you must first parse it, <code>var x = JSON.parse('{"x":"y"}');</code>, <code>x</code> is now an object but this is not JSON anymore.</p> <p>See <a href="https://stackoverflow.com/questions/8294088/javascript-object-vs-json">Javascript object Vs JSON</a></p> <hr> <p>When working with JSON and JavaScript, you may be tempted to use the <code>eval</code> function to evaluate the result returned in the callback, but this is not suggested since there are two characters (U+2028 &amp; U+2029) valid in JSON but not in JavaScript (read more of this <a href="https://web.archive.org/web/20110622075541/http://timelessrepo.com/json-isnt-a-javascript-subset" rel="noreferrer" title="JSON: The Javascript subset that isn&#39;t">here</a>).</p> <p>Therefore, one must always try to use Crockford's script that checks for a valid JSON before evaluating it. Link to the script explanation is found <a href="http://www.json.org/js.html" rel="noreferrer">here</a> and here is a <a href="https://github.com/douglascrockford/JSON-js/blob/master/json2.js" rel="noreferrer">direct link</a> to the js file. Every major browser nowadays has <a href="https://stackoverflow.com/q/891299/1505348">its own implementation</a> for this.</p> <p>Example on how to use the JSON parser (with the json from the above code snippet):</p> <pre><code>//The callback function that will be executed once data is received from the server var callback = function (result) { var johnny = JSON.parse(result); //Now, the variable 'johnny' is an object that contains all of the properties //from the above code snippet (the json example) alert(johnny.firstName + ' ' + johnny.lastName); //Will alert 'John Smith' }; </code></pre> <p>The JSON parser also offers another very useful method, <code>stringify</code>. This method accepts a JavaScript object as a parameter, and outputs back a string with JSON format. This is useful for when you want to <em>send data back to the server:</em></p> <pre><code>var anObject = {name: "Andreas", surname : "Grech", age : 20}; var jsonFormat = JSON.stringify(anObject); //The above method will output this: {"name":"Andreas","surname":"Grech","age":20} </code></pre> <p>The above two methods (<code>parse</code> and <code>stringify</code>) also take a second parameter, which is a function that will be called for every key and value at every level of the final result, and each value will be replaced by result of your inputted function. (More on this <a href="http://www.json.org/js.html" rel="noreferrer">here</a>)</p> <p>Btw, for all of you out there who think JSON is just for JavaScript, check out <a href="http://simonwillison.net/2006/Dec/20/json/" rel="noreferrer">this post</a> that explains and confirms otherwise.</p> <hr> <h2>References</h2> <ul> <li><a href="http://www.json.org/" rel="noreferrer">JSON.org</a></li> <li><a href="http://en.wikipedia.org/wiki/JSON" rel="noreferrer">Wikipedia</a></li> <li><a href="http://secretgeek.net/json_3mins.asp" rel="noreferrer">Json in 3 minutes</a> (Thanks <a href="https://stackoverflow.com/questions/383692/what-is-json-and-why-would-i-use-it#384026">mson</a>) </li> <li><a href="http://developer.yahoo.com/javascript/json.html" rel="noreferrer">Using JSON with Yahoo! Web Services</a> (Thanks <a href="https://stackoverflow.com/questions/383692/what-is-json-and-why-would-i-use-it#383716">gljivar</a>)</li> <li><a href="https://json-csv.com" rel="noreferrer">JSON to CSV Converter</a></li> <li>Alternative <a href="https://jsontoexcel.com" rel="noreferrer">JSON to CSV Converter</a></li> <li><a href="https://jsonlint.com/" rel="noreferrer">JSON Lint (JSON validator)</a></li> </ul>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload