How to render JSON object in HTML using Json-Formatter

Today we will see How to render JSON object in HTML using Json-Formatter. Before going ahead we have to discuss about JSON. A JSON is a JavaScript Object Notation; it is syntax for storing and exchanging data. JSON is text, written with JavaScript object notation. When we exchanging the data between the browser and server that data can only be text. We can convert any JavaScript object to JSON, and send it to the server. We can also convert JSON into JavaScript objects. If you have data stored in a JavaScript object, you can convert this object to JSON and then send it to server. JSON is very lightweight data-interchange format, easy to understand and language independent. A JSON is a minimal, readable format for structuring data and its alternative to XML.

Why Use JSON?

A JSON format is a text only and it can easily send to server and server to client, used as a data format by any programming language. JavaScript has built in function that converts a string that is written in JSON format into native JavaScript objects JSON.parse().

The two primary parts that make JSON are keys and values. They make a key/value pair. A Key is always a string enclosed in quotation marks. A value can be string, number, Boolean expression, array or object. A Key/Value pair follows a specific syntax, with the key followed by a colon followed by the value. It is a comma separated.

Example of Key/Value Pair:

“Data”: “information”

The key is “Data” and value is “information”.

A key always in string format but the value doesn’t have any fix type. There so many types of values in JSON.

First type is “Array”, An Associate array of values. Second is “Boolean”, It is true or false. Third is Number, It is an integer. Fourth type is Object, An associate array of key/value pairs. The last fifth type is “String”, several plain text characters which usually form a word. There are so many features of JSON, like a Simplicity, Openness, Self Describing, Internationalization, Extensibility, and Interoperability.

When we create web application and we need to create JSON by as entering data, A JSON is create automatically by code but we can’t see that JSON on UI so some time created JSON is going wrong. If we can view JSON then we create proper JSON and if we create wrong JSON at that time we change the JSON, we can use JSON Formatter for view JSON on UI. A JSON Formatter is a directive of AngularJS for rendering JSON objects in HTML with the collapsible navigation.

Example of JSON Formatter:

Now, we will create one tutorial demo for JSON Formatter, so create new empty project in visual studio or visual studio code, you can use any one editor both of them. After created empty project we will create required folders in empty project. There are four folders we have create like “bower_components”, “scripts”, “controller” and “view” folders.

In scripts folder, create module file (app.js) because module file is most important in angular application. In module file we have to inject the component name in module definition.

App.js

var app = angular.module ('JsonFormatter', ['jsonFormatter']);

Above we have inject the “jsonFormatter” dependencies in the module but the before inject it, you have to install the “jsonFormatter” component via Bower or npm. You can install it by Bower or npm site. If you want to install by command then open command prompt in visual studio and write below command.

• Install via Bower or npm
  • Bower install json-formatter --save
  • Npm install jsonformatter --save

After installed the json-formatter component, next install the angularjs bower component because we are create this tutorial using angularjs so it is important for our tutorial demo. In “bower_components” folder two components are available first is AngularJs and second is json-formatter. The module file and components are installed successfully then we will create “Controller” file in controller folder. In AngularJS, a Controller is defined by JavaScript constructor function that is used to augment the AngularJS Scope. Controller file binded with HTML page.

jsonFormatterController.js

app. controller ('jsonFomatterController', ['$scope’, function ($scope) {

    $scope.jsonData = null;

}]);

Above we have created controller file by name of “jsonFormatterController” and added dependency of “$scope”. A “$scope” is global variable in whole project, you can bind $scope variable data by in HTML page and we define the null of $scope.jsonData and we have binded this global variable in HTML page.

In HTML page (Index.html) we have to inject component file path, and we have create one form for getting data from user and you can view created JSON in JSON Formatter. First we inject the json-formatter.css file in tag and then inject the angular.js, json-formatter.js, app.js and jsonFormatterController.js files in between tag.

Index.html

<! DOCTYPE html>
<html data-ng-app="JsonFormatter">
<head>
<title>JsonFormatter</title>
<meta charset="utf-8" />
 <! -- JsonFormatter CSS file -->
<link href="../bower_components/json-formatter/dist/json-formatter.css" rel="stylesheet" />
</head>
<body ng-controller="jsonFomatterController">

<form name="jsonCreateForm" id="jsonCreateForm">
<div>
<input type="text" ng-model="jsonData.id" placeholder="Enter ID" /><br /><br />
<input type="text" ng-model="jsonData.name" placeholder="Enter Name" /><br /><br />
<input type="text" ng-model="jsonData.description" placeholder="Enter Description" />
</div>
</form>
<br />
<b>JSON</b>
<json-formatter json="jsonData" open="1"></json-formatter>
<br />
<!--- Angular file  -->
<script src="../bower_components/angular/angular.js"></script>

<!-- JsonFormatter JS file -->
<script src="../bower_components/json-formatter/dist/json-formatter.js"></script>

<!-- Modluar file -->
<script src="../scripts/app.js"></script>

<!-- Controller file -->
<script src="../controller/jsonFormatterController.js"></script>
</body>
</html>

Above we have inject the modular name (“JsonFormatter”) in and second inject the controller in and created one form and in this form we enter the data and backend side it’s create a JSON object that you can see Bottom of Form in JSON Formatter, when form is blank at that time JSON is undefined. A json-formatter is a directive and “json” is attribute of the directive, in this attribute we bind the object like “json”, we have declare the $scope.json = null in controller, while we fill the form then object will update as same json object view in JSON Formatter.