How to parse multidimensional JSON to html easily?

Question

I want to parse json to html easily. I have a multidimensional json. so i want to parse this to html easily. any plugin or any simple code is available ? The following my json file.

    [
        {
            "country": "India",
            "state": [
                {
                    "name": "Delhi",
                    "capital": "New Delhi"
                },
                {
                    "name": "Tamilnadu",
                    "capital": "Chennai"
                }
            ]
        },
        {
            "country": "USA",
            "state": [
                {
                    "name": "Alabama",
                    "capital": "Montgomery"
                },
                {
                    "name": "Alaska",
                    "capital": "Juneau"
                }
            ]
}
]

The html is like this.

<ul>
        <li>India</li>
 <ul>
        <li>State1 :capital</li>
        <li>State2 :capita2</li>

</ul>
        <li>USA</li>
 <ul>
        <li>State1 :capital</li>
        <li>State2 :capita2</li>

</ul>

</ul>

I want to get output like this Which is best and simplest way to get this output?

Answer 1

You can use jquery jput plugin (http://plugins.jquery.com/jput/)

http://jsfiddle.net/mse255ko/1/

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>

Answer 2

Please use jquery each for looping the JSON data, here during each iteration the variable html value is concatenated, so you can append to any DIV.

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"
                }
            ]
}
];
jQuery(document).ready(function(){
                       
var html = "";
    jQuery.each(data, function(i,v){
      var temp = JSON.parse(JSON.stringify(v)); 
      html += "<ul><li>"+temp.country+"</li></ul>"; 
      jQuery.each(temp.state, function(j,val){ 
         html += "<li>" + val.name +"</li>"; 
      }); 
    });
    $("#result-div").html(html);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="result-div"></div>