Convert JSON Data to HTML Using jQuery Plugin Miranda.js

In this quick tutorial I am going to introduce one awesome plugin which is very helpful to Convert JSON Data to HTML. It is helpful while working on any JSON based API because using Miranda.js you can easily convert your json output into dynamic html data.

Miranda.js – A jquery plugin for easy integration between JSON and HTML. Maintaining harmony and peace between interface programmers and server programmers when using REST services.



Convert JSON Data to HTML Using jQuery Plugin Miranda.js

Below I am going to show you a very basic example of converting JSON Data to HTML you can download zip file for more complex example.

Libraries

Include latest jquery library after that include Miranda.js on your html page.

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <script src="jquery.miranda.min.js"></script>

Here is the dummy json data

 var data = {"firstname": "Rohit", "lastname": "Kumar"};

The attribute name of the list or object must be the name of the key in its HTML code between [[]].
Create the JSON template as follows:

<div id="userList">
    <h1>[[firstname]]</h1>
    <h2>[[lastname]]</h2>
</div>

Initialisation Miranda.js to convert json to html data.

<script>
var user = {"firstname": "Rohit", "lastname": "Kumar"};
$("#userList").mirandajs(user);
</script>



Plugin also support json array See One more example, In this example we’ll see how to convert json data for county into html select list box.

<label>Country list: </label>
<select id="countryList" style="display: none;">
        <option>[[name]]</option>
</select>
<script>
    $( document ).ready(function() {
        var country_list = [{"name":"Afghanistan"},{"name":"India"},{"name":"Australia"},{"name":"United State"},{"name":"United Kingdom"},{"name":"Canada"}];
        $("#countryList").mirandajs(country_list);
    });
</script>

See demo and download source code for more complex examples.

DEMO | DOWNLOAD

See official github repository for more information and follow for future updates.Don’t forget to read license for using above plugin in your commercial project.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.