JSON Introduction

 in Database  tagged JavaScript / JSON / objects by

Here is what Wikipedia says about JSON, paraphrased: JSON (JavaScript Object Notation) is an open-standard format that uses human-readable text to transmit data objects consisting of attribute–value pairs. It is the most common data format used for asynchronous browser/server communication, largely replacing XML which is used by AJAX.

Wikipedia goes on to say: “JSON is a language-independent data format. It derives from JavaScript, but as of 2016, code to generate and parse JSON-format data is available in many programming languages. The official Internet media type for JSON is application/json. The JSON filename extension is .json. Douglas Crockford originally specified the JSON format; two competing standards, RFC 7159 and ECMA-404, define it. The ECMA standard describes only the allowed syntax, whereas the RFC also provides some semantic and security considerations.”

Here is a simple example of JSON from one of my favourite websites, w3schools The following JSON example defines an employees object, with an array of 3 employee records: 

{"employees":[
    {"firstName":"John", "lastName":"Doe"},
    {"firstName":"Anna", "lastName":"Smith"},
    {"firstName":"Peter", "lastName":"Jones"}
]}

Below is that same data formatted differently. 

{  
   "employees":[  
      {  
         "firstName":"John",
         "lastName":"Doe"
      },
      {  
         "firstName":"Anna",
         "lastName":"Smith"
      },
      {  
         "firstName":"Peter",
         "lastName":"Jones"
      }
   ]
}

The following example is XML from w3schools of the same three records: 

<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>

Wikipedia has another example of JSON shown below, representing a person: 

{
  "firstName": "John",
  "lastName": "Smith",
  "isAlive": true,
  "age": 25,
  "address": {
    "streetAddress": "21 2nd Street",
    "city": "New York",
    "state": "NY",
    "postalCode": "10021-3100"
  },
  "phoneNumbers": [
    {
      "type": "home",
      "number": "212 555-1234"
    },
    {
      "type": "office",
      "number": "646 555-4567"
    },
    {
      "type": "mobile",
      "number": "123 456-7890"
    }
  ],
  "children": [],
  "spouse": null
}

Below is a code example of using JSON in a website. When you are using WordPress, you cannot simply paste this code into your post to see how it works. I tried and nothing showed up in my post. In WordPress you need to upload your JavaScript file to the server and then call the file. Here are some instructions in the Codex at wordpress.org. To see it working, you can go to the editor at w3schools and see it working – live! About half way down the web page at w3schools there is a green button called Try It Yourself. Click it to see and experiment with the code. 

<!DOCTYPE html>
<html>
<body>

<h2>JSON Object Creation in JavaScript</h2>

<p id="demo"></p>

<script>
var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';

var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>

</body>
</html>

Micha’s Golden Rule

Micha Gorelick, a data scientist in NYC, coined the following rule: Do not store data in the keys of a JSON blob. This is Micha’s Golden Rule; it should always be followed when forming JSON for use in D3, and will save you many confusing hours. This means that one should never form JSON like the following:

{
"bob": 20,
"alice": 23,
"drew": 30
}

Here we are storing data in both the key (name) and the value (age). This is perfectly valid JSON, but breaks Micha’s Golden Rule, which is bad. Instead, we would form the following as a list:

[{
"name": "bob",
"age": 20
}, {
"name": "alice",
"age": 23
}, {
"name": "drew",
"age": 30
}]

Here, we store data only in the values, and the keys indicate only what the data represents. If you are in the unfortunate position of having JSON that breaks Micha’s Golden Rule, consider using d3.entries() to make the conversion. via: O’Reilly’s book called Getting Started with D3.