How to parse multidimensional JSON to html easily?

var data=[        {            "country": "India",            "state": [                {                    "name": "Delhi",                    "capital": "New Delhi"                },                {                    "name": "Tamilnadu",                    "capital": "Chennai"                }            ]        },        {            "country": "USA",            "state": [                {                    "name": "Alabama",                    "capital": "Montgomery"                },                {                    "name": "Alaska",                    "capital": "Juneau"                }            ]}];$(document).ready(function(){	//loading json data initally 	$('#maindiv').jPut({		jsonData:data,		name:'template1'	});});  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://shabeer-ali-m.github.io/jPut/js/jput.min.js"></script><div id="maindiv">    <div jput="template1">    <ul>        <li>{{country}}</li>        <ul>            <li>State 1 Name : {{state.0.name}}, Capital : {{state.0.capital}}</li>             <li>State 2 Name : {{state.1.name}}, Capital : {{state.1.capital}}</li>        </ul>    </ul>    </div>    </div>