Convert JSON Data to HTML - jQuery Miranda.js

Miranda.js is a lightweight jQuery plugin that makes it possible to convert JSON objects into HTML data via AJAX GET or POST requests. Check out more complex example pages in the zip.

Installation:

# NPM
$ npm install miranda-js --save

Basic usage:

1. Load the latest version of jQuery JavaScript library (slim build is recommended) and jQuery Miranda.js script in your html document.

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

2. Prepare your JSON data as follows:

var data = {"name": "jQuery", "lastname": "Script"};

3. Create the JSON template as follows:

<div id="demo">
  <h1>[[name]]</h1>
  <h2>[[lastname]]</h2>
</div>

4. The JavaScript to convert the JSON data into html.

$("#demo").mirandajs(data);

5. The plugin also supports JSON arrays

<select id="countryList" style="display: none;">
  <option>[[name]]</option>
</select>

var country_list = [
    {"name":"Afghanistan"},
    {"name":"Brazil"},
    {"name":"Belgium"},
    {"name":"Costa Rica"},
    {"name":"France"},
    {"name":"Zimbabwe"}
];
$("#countryList").mirandajs(country_list);

6. Default plugin settings.

$("#demo").mirandajs(data,{
  jsonNode:[''],
  containers:[this.attr('id')],
  effect:'show', // show, fadeIn and slideDown
  delay:1000,
  nodeDelay:500,
  ajaxMethod:'GET',
  postData:{},
  noCache: false
});

---

This awesome jQuery plugin is developed by fabiano-miranda. For more Advanced Usages, please check the demo page or visit the official website.