JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://thrusto.com/js/jput_1.1.0.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>

JavaScript

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"
                }
            ]
}
];

	//loading json data initally 
	$('#maindiv').jPut({
		jsonData:data,
		name:'template1'
	});