JSON Data binding


What is JSON?

JSON stands for JavaScript Object Notation; JSON is a lightweight format for storing and transporting data.JSON is commonly used when sending data from a server to a web page.

How to bind JSON data to html

Sometimes, we look for a way to bind json data to html UI directly, so we don’t have to write all the complex and time-consuming code. However, there are many html templating frameworks available in the market. But none of them is easy to implement, and sometimes they even change your application architecture. For one of my projects, I wanted to use the simplest way to bind json objects with html elements without making any significant change in application architecture and without writing a lot of code.

The easiest way:

As we do in .Net WPF forms ( MVVM binding ), we create a view model and bind its various properties with various UI elements. I wanted to have something similar for html, without injecting too much-templating code on the page. And the following solution is precisely what I wanted. Knockoutjs: Knockoutjs is all that we need. It won’t slow you down; it works well with mobile devices and requires you to change your application architecture. It introduces the MVVM binding model for json and html.
You need to include the following line in the head section of your html page in order to use knockoutjs.

< script src = "https://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js"type = "text/javascript" >< /script >