JSON Basics For Beginners-Examples and Workbook

json-beginners-iconWhen sending and receiving data in IOT applications and APIs you will encounter JSON formatted data.

Having a good working knowledge of JSON, and how to create and use JSON data will be very important in developing IOT applications.



In this tutorial and Workbook you will learn:

  • What JSON is and Why it is Used
  • Basic JSON syntax
  • How to convert JSON to JavaScript and vice versa
  • How to use the online JSON editor
  • How to extract data from JavaScript objects and arrays.

What is JSON (JavaScript Object Notation)?

JSON is a format for encoding data in human readable format for storing and sending over a network.

Although it started in JavaScript it is used in all modern programming languages.

Why is is used?

It is used because it makes it easy to store and transfer JavaScript arrays and objects as text data.

JSON Format

JSON stores data as:

  • key/value pairs
  • Data is separated using commas
  • Text data is enclosed in double quotes
  • Numerical data has no quotes.
  • Arrays are enclosed in square brackets []
  • Objects are enclosed in curly brackets {}
  • The output is a text string

Sending and Receiving JSON Data

Data from devices and sensors in IOT apps is normally sent in JSON format.

So the application program on the sensor has to package the data into a JSON string and the receiving application has to convert the JSON string into the original data format e.g. object .

All major programming languages have functions for doing this.

Creating JSON Data

You can create a JSON string manually but when coding complex data structures in it common to use a JSON editor.

In addition to verify that the encoding is correct it is common to use a JSON validator.

We will be doing exercises involving both. The exercises consist of a worked example(s) and questions to test your understanding.

Creating a JSON string from JavaScript Arrays and Objects:

Worked Example 1:

Convert the following JavaScript array to JSON.

var names= [“john”, “jake”];

Answer

[“john”, “jake”]

Worked Example 2:

Convert the following JavaScript object to JSON

var power={voltage: 240,current: 1}

Answer:

{“voltage”: 240,”current”: 1}

Note: In JSON numbers do not need quotes

Worked Example 3:

Convert the following JavaScript object to JSON

var power={voltage: “240”,current: “1”};

Answer:

{“voltage”: “240”, “current”: “1”}

Note: This time even though they are numbers they are represented as strings in JavaScript and so they need quotes.

Practical Exercise 1:

Convert the following JavaScript object to JSON

var data={sensor: “sensor1”, temperature: 21, humidity: 67};

Answers to all questions are at the end.

Questions

Q1 -The following JSON string consists of

[{“sensor”: “sensor1”, “temperature”: 21, “humidity”: 67}]

  1. An array
  2. An object
  3. An Array inside an object
  4. An object inside and array

Q2– The JSON string consists of:

[{“sensor”: “sensor1”, “temperature”: 21, “humidity”: 67},{“sensor”: “sensor2”, “temperature”: 22, “humidity”: 62}]

Consists of:

  1. An array with two objects
  2. An object with two arrays
  3. An Array
  4. An object inside and array

Q3 – The JSON string consists of:

[{“sensor”: “sensor1″,”temperature”: 21, “humidity”: 67},{“sensor”: sensor2, “temperature”: 22, “humidity”: 62}]

Is it?:

  1. Valid
  2. Invalid

Creating Complex JSON Strings

You can use the online JSON editor tool for creating more complex JSON structures.

To illustrate how to use the JSON editor Tool we are going to create a JSON string with an array of 3 objects.The objects are:

Object 1 contains the following key/value pairs:

name=John,DOB=1/1/2000,Age=20

Object 2 contains the following key/value pairs:

name=Jim,DOB=21/2/1990,Age=30

Object 3 contains the following key/value pairs: name=Jane,DOB=6/11/1958,Age=61

Video- Using the Online JSON editor

Converting JSON to JavaScript and Extracting Data

Although you can extract data from a JSON string using JSONata the most common method is to convert it to a JavaScript object, and that is what we cover here.

To convert a JSON string to a JavaScript object you use the JSON parse function.

Object= JSON.parse(JSONstring)

Once the JSON data is placed into a JavaScript Object you can now use normal JavaScript methods and functions to extract elements of that data.

We will start using the simple JavaScript object we saw earlier.

Worked Example 1:

var power={voltage: “240”,current: “1”}

To extract the voltage we use either the dot form or the square bracket.

var voltage=power.voltage or

var voltage=power[“voltage”]

Worked Example 2:

var data=[ { sensor: ‘sensor1’, temperature: 21, humidity: 67 },

{ sensor: ‘sensor2’, temperature: 22, humidity: 62 } ]

This time we have an array of two objects.

So

var sensor= data[0].sensor

Returns sensor1

var sensor= data[1].hunidity

Returns 62

Note: Arrays start at 0

Worked Example 3:

This time we have an object containing an array :

sensor={ results: [ 1, 21, 34, 21 ] }

To access the 2 element in the results array we use:

var r= sensor.results[1]

Using the Node.js Command Line

When working on Decoding JSON strings I often find it easier to paste the string into a node.js command line and decode it there.

The examples belowshow screen shots using the node.js command prompt for converting to and from JSON strings to JavaScript Objects.

JSON And JavaScript

There are two functions that are used for converting data from JavaScript to JSON and from JSON to JavaScript. They are:

  • JSON.stringify(JavaScript object)
  • JSON.parse(JSON string)

Example: JavaScript Array to JSON String

javascript-array-json
Example: JavaScript Object to JSON String

javascript-object-json

Example: JSON to JavaScript

Below shows the JSON strings b and d being converted back to JavaScript.

JSON-JavaScript

Workbook Exercises

The following exercise will test your ability to extract data from JavaScript Objects and arrays.

You can do these exercises on paper only but may find it easier using node.js command line if you have node.js installed.

Here is an example taken from above:

json-javascript-example

Workbook download.

 

Answers to Questions

Exercise 1:

{“sensor”: “sensor1”, “temperature”: 21, “humidity”: 67}

Question 1: D

Question 2: A

Question 2: B – Missing quotes on sensor2.

Summary

JSON is used extensively in web and IOT applications and is a very easy methods of storing and transferring complex data as text.

Newsletter

I publish a newsletter from time to time with tutorials,videos,news and tips that you might find useful. To receive it just complete the form below and then confirm your subscription.

Resources

JSON formatter and Validator

Related Tutorials

Please rate? And use Comments to let me know more
[Total: 1   Average: 5/5]

Leave a Reply

Your email address will not be published. Required fields are marked *