Introduction to jsRender

To start with, firstly we must know, what is jsRender?

jsRender is a very powerful feature that is used to render dynamic contents on the web browser. In simple words, it’s a way to apply templates to the JSON data formed at the client side or coming from the server side through AJAX requests and render them dynamically on the web browser. There is a similar alternative offered via jQuery templating, which probably is getting ruled out with the rise of jsRender, as it is said to be 20 times faster than what jQuery templating offered.

jsRender has no dependency on the DOM or jQuery particularly, and is very much compatible with frameworks like DOJO as well.

Let’s checkout a scenario where we need to populate a select box with the available data. To start with what we have in the basic HTML,

Now, add all the required script references to jsRender and jQuery, let’s create our own dataMap, that would serve as the data source to our jsRender template.

Points to note:

  1. Creating the filtered dataMap with only data that is needed, like I don’t need the rating, so I create the dataMap with only name and value.
  2. Why such data can ever exist? It can, if you pull the JSON data through some AJAX call, that returns something like list of maps in the response body. Make sure you JSON parse the actual response received, before creating the dataMap.

To sum up, we have the complete code as:

That populates the dropdown as:


Let us know if you find any difficulties in understanding, so we can add improvements to this article.  I have some useful links where you can check out more of the demos and documentations:

Receive our updates to your inbox

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.