JSON stands for JavaScript Object Notation, which is a format for sharing data. As the name suggests, JSON is derived from JavaScript. Other languages like PHP, Python, Java, C# and Ruby can use it.

Why use it?

JSON is readable and light weight. It requires less formatting than XML. JSON’s structure is a key-value pair format that is rendered in curly braces. You can choose to use it in a file (*.json), a string or as an object.

How do I create a JSON object?

  • Use curly braces to define the beginning and ending of the object
  • Put data in key/value pairs
  • Use a colon to separate the key from the value
  • Keys are strings
  • Values can numbers, strings, objects, arrays, booleans or null
  • Use a comma to separate each key/value pair

{
	"name" :  "Isaac",
	"age" : 50,
	"job" : "writer",
	"car" : null
}

Build a simple website with JSON

The key/value pair makes it easy to share data in web applications. You’ll need a language like JavaScript to display the data. The Mozilla Developer Network walks you through a simple example in their tutorial using JSON on a website. You build a one page website that lists 3 superheroes.

Modifying the website

The superhero website is a bit plain without images. I downloaded three images from Pixabay and updated the superhero.json file. I added a key/value pair for each image like “imageUrl”: “images/molecule-man.png”. Then, I modified the JavaScript to display the image.

I tweaked the CSS to put a border on each superhero member to make it look a little more card-like.

Screenshot of JSON Superhero Website

Where can I learn more?