How to easily parse multidimensional JSON for html?

Question

I want to parse json for html easily. I have multidimensional json. so i want to parse this easily in html. any plugin or any simple code? The following is 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" } ] } ] 

html is as follows.

 <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 the result as follows. What is the best and easiest way to get this result?

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.imtqy.com/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 to cyclize JSON data, here during each iteration the value of the html variable is concatenated, so you can add 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> 

Answer 3

1- Iterative arrays using forEach
2- check the presence of keys in dictionaries using object.hasOwnProperty
3- create html elements with $("< type-of-element >")
4- build a string in the desired format.

You can try this script:

 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" } ] } ] var to_append = $("body") //your append selector if(data && data.length>0){ var outer_ul = $("<ul>") data.forEach(function(e,i){ if(e.hasOwnProperty("country")){ outer_ul.append($("<li>", {text : e['country']})) } if(e.hasOwnProperty("state")){ var inner_ul = $("<ul>") e['state'].forEach(function(__e,__i){ if(__e.hasOwnProperty('capital')){ inner_ul.append($("<li>", {text : "State "+(__i+1) + " : " + __e['capital']})) } }) outer_ul.append(inner_ul) } }) to_append.append(outer_ul) } 

this will result in html output:

 <ul> <li>India</li> <ul><li>State 1 : New Delhi</li><li>State 2 : Chennai</li></ul> <li>USA</li> <ul><li>State 1 : Montgomery</li><li>State 2 : Juneau</li></ul> </ul> 

Answer 4

jQuery version of this problem (live sample):

• .each to iterate over an array
• .appendTo to add a child to the parent
• .text to set the text content of an element

 var countries = [ { "country": "India", "state": [ { "name": "Delhi", "capital": "New Delhi" }, { "name": "Tamilnadu", "capital": "Chennai" } ] }, { "country": "USA", "state": [ { "name": "Alabama", "capital": "Montgomery" }, { "name": "Alaska", "capital": "Juneau" } ] } ] var $root = $("ul"); $.each(countries, function () { $("<li>").appendTo($root).text(this.country); var $ul = $("<ul>").appendTo($("<li>").appendTo($root)); $.each(this.state, function () { $("<li>").appendTo($ul).text(this.name + ": " + this.capital); }); }); 

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

Answer 5

Of course, you can also use AngularJS for this, this is one of the main points of angular, which binds data very 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" } ] }]; function bindData($scope) { $scope.countries = data; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="" ng-controller="bindData"> <ul ng-repeat="c in countries"> <li>{{c.country}}</li> <ul> <li ng-repeat="s in c.state">{{s.name}} :{{s.capital}}</li> </ul> </ul> </div>