JSON Basics


A software tester who works closely with web applications, it is important to understand the concept of JSON. Every client-server communication is driven through JSON under the hood. Hence, it's all the more important to understand what this format represents and why this format is widely used across development teams. 

Why do you have to understand JSON?

You get to encounter JSON at every step of your testing activity, be it API or web testing. A little understanding can help you go a long way. It will help analyse the issue and communicate to wider team appropriately with relevant details. 
So naturally the next question would be, where will i get to see this data in browser?

Right click ->inspect element -> Network tab -> Response

Example:-


First let's look at the basics of client-server communication. In all the web based application, the client(user's browser) sends request for certain details to the server. Server processes the request and compose the response to be sent. This response can be of any format- JSON, XML, CSV etc.  

The classic approach in the past was to respond the client request with relevant HTML page in response. That simply means lot of processing and time lags for all the instances where only data was required. The client server communication was made more lighter by client handling the UI aspect and server returning the required details which will be mapped back to relevant fields on to the UI, sounds like a more sorted approach.


JSON structure

JSON file is embedded between squared braces, can be simple or Nested representation. The data is always represented in <Key>:<Value> format. 


Interacting with the simple JSON object is pretty straightforward. However things gets little tricky when you have to work with nested structure. This needs little more than basics of JSON. When the response is sent from server, it is always in string format and Json.parse() will convert the data to  JS object format. Let us take an example to continue our understanding about JSON. 


Example API: The below api is from NASA, which returns the MARS rover photos.

https://api.nasa.gov/mars-photos/api/v1/rovers/curiosity/photos?sol=1000&page=2&api_key=DEMO_KEY

When the URL launched in local web browser, we get to see something as below. This is the response from the server for the query placed by client (browser). This is kind of off-putting, not easy to understanding whats been rendered by server. 


in such scenarios, use tools like JSON formatter to beautify the data in more readable format.Or you can also use tools like Postman to check the response, where the formatted response is rendered. 



Tools to keep handy

While dealing with JSON, few tools help simple up things

Types supported in JSON

JSON file supports following types of data to be composed. 

  • Strings "Example"
  • Numbers  10 , 1.5, -80 etc
  • Boolean
  • null
  • Arrays [1,2,3]
  • Object {"id", "101"}

Advantages of JSON

  •  JSON is preferable format due to its lightweight and clean approach. 
  • Simple and easily understandable.
  • Wide range of browser compatibility.
  • JSON storage is optimal.
  • Easy array storage and parsing.

Disadvantages

  • The format is not fully secure.
  • Limited support for data types

Interested to know more? check these links

Comments

Post a Comment