Online Json Viewer And Json Path Finder

What is JSON

JSON is a javascript object notation, which uses the standard text-based format for storing data, based on the javascript object syntax.
JSON simplifies the transfer of data between server and client on the web. There are other formats used such as XML, but JSON got more popular these days as it is more human-friendly and easy to transfer between client and server on the web.
When testing or debugging the web apps or websites, you will encounter minified JSON or unformatted JSON,which is very hard to read. In that case, you can use this tool to format or beautify the JSON, which will increase the readability of the json.

Example JSON

{
  "errMsg": "SUCCESS",
  "serviceStatus": "0000",
  "accounts": [
    {
      "subProductType": "Mutual Fund Portfolio",
      "accountID": "100003954091",
      "sidNumber": "",
      "sreNumber": "",
      "accgroup": "WEALTH",
      "accType": "MUTUAL FUND",
      "errmsg": "SUCCESS",
      "totalProduct": "1",
      "totalInvestment": "700000.00",
      "totalReturn": "350000.00",
      "totalCurrentValue": "1050000.00"
    }
  ]
}

JSON Tree Viewer

Json tree viewer is an online tool to view JSON in a tree format, so that you can easily visualize the contents of the JSON.
Using the checkbox option, you can highlight the JSON subtree, so you can easily track the JSON.
Using the search
option, you can search for the value of the JSON path in the JSON tree viewer.

You can expand all the collapsed fields, and you can collapse all the expanded fields using the Expand All Fields and Collapse All Fields option respectively.
By clicking on the clear icon
in the viewer header, you can clean the generated JSON tree.
As you click on the element in the JSON tree, it gets highlighted and displays the path for that JSON value in the Selected Object Path section.

If you want to view the JSON value as tree structure for the particular JSON path, then you can use the Show Path option.
If the JSON key and value pair count exceeds 1000, then the search option will be disabled and only the top level elements will be shown to keep the performance optimal. But you can navigate deep down the top level nodes using the arrow icon displayed next to the elements.

Why Use Json?

It is human-readable and does not have any mark-up structure like xml.
Can be easily parsed in any programming language and have evaluating support in all programming languages.
Can hold number of data without affecting the readability of data ( if it is formatted ).
Can be used to share data between two services that run on different tech stack without modifying anything in those services.
It has become a standard in web for sharing structured data between services.
Supports data types such as string, numbers, null, boolean, json object, array.
Can be easily converted between string and object.

Json Syntax

Json object should be encapsulated by curly braces {}.
Arrays in json is encapsulated by square brackets [].
Empty json object should be encapsulated by curly braces {}.
The json data should be key-value type.
The key and value should be enclosed by double-quotes.
Each key-value pair should be separated by comma “,” .
Json supports boolean, numbers, null, json object, string, array data types.
boolean data type can have true or false in lower case and does not include double-quotes.
Empty json array can be represented by [].
Mime type for json files is “application/json” as defined in MDN
.
Extension for json file is fileName.json .

{
  "jsonObject": {
    "id": "2489651045",
    "type": "CreateEvent",
    "actor": {
      "id": 665991,
      "login": "petroav",
      "gravatar_id": "",
      "url": "https://api.github.com/users/petroav",
      "avatar_url": "https://avatars.githubusercontent.com/u/665991?"
    }
  },
  "jsonArray": [
    {
    "id": "2489651051",
    "type": "PushEvent",
    "actor": {
      "id": 3854017,
      "login": "rspt",
      "gravatar_id": "",
      "url": "https://api.github.com/users/rspt",
      "avatar_url": "https://avatars.githubusercontent.com/u/3854017?"
      }
    }
  ]
}

How To Use Json In Javascript

You can use the JSON.parse(inputString)to parse the json from string in javascript.

Example :


  var stringToJsObject=JSON.parse("{\"jsonObject\":{\"id\":\"2489651045\",\"type\":\"CreateEvent\",\"actor\":{\"id\":665991,\"login\":\"petroav\",\"gravatar_id\":\"\",\"url\":\"https://api.github.com/users/petroav\",\"avatar_url\":\"https://avatars.githubusercontent.com/u/665991?\"}},\"jsonArray\":[{\"id\":\"2489651051\",\"type\":\"PushEvent\",\"actor\":{\"id\":3854017,\"login\":\"rspt\",\"gravatar_id\":\"\",\"url\":\"https://api.github.com/users/rspt\",\"avatar_url\":\"https://avatars.githubusercontent.com/u/3854017?\"}}]}");
  console.log(stringToJsObject.jsonObject.type);
  console.log(stringToJsObject.jsonArray[0].actor.avatar_url);

You can use the JSON.stringify(inputJsonObject)to get the string representation of the JSON.


  var stringToJsObject=JSON.parse("{\"jsonObject\":{\"id\":\"2489651045\",\"type\":\"CreateEvent\",\"actor\":{\"id\":665991,\"login\":\"petroav\",\"gravatar_id\":\"\",\"url\":\"https://api.github.com/users/petroav\",\"avatar_url\":\"https://avatars.githubusercontent.com/u/665991?\"}},\"jsonArray\":[{\"id\":\"2489651051\",\"type\":\"PushEvent\",\"actor\":{\"id\":3854017,\"login\":\"rspt\",\"gravatar_id\":\"\",\"url\":\"https://api.github.com/users/rspt\",\"avatar_url\":\"https://avatars.githubusercontent.com/u/3854017?\"}}]}");
  var JsObjectToString=JSON.stringify(stringToJsObject);
  console.log(JsObjectToString);

What You Can Do?

Format / Beautify JSON
Minify JSON
Validate JSON
Can view JSON as Tree structure
Download the JSON as .txt file, .json file and as pdf file.

Limitations

When you try to upload file greater than 5MB, you will not be able to edit in the text editor as browser will not be able to handle large text and cause the browser to freeze.
But you can still format/beautify, minify, validate and download.
If you try to download the large file as pdf, it may take some time to prepare the pdf. Please be patience.