Come analizzare facilmente il JSON multidimensionale in html?

Question

Voglio analizzare facilmente json in html. Ho un json multidimensionale. quindi voglio analizzare questo in html facilmente. qualsiasi plugin o codice semplice è disponibile? Quanto segue il mio file json.

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

L'html è come questo.

<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> 

voglio ottenere output come questo Quale è la cosa migliore e più semplice per ottenere questo risultato?

Answer 1

È possibile utilizzare jQuery plugin di jput (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(){ 
 
\t //loading json data initally 
 
\t $('#maindiv').jPut({ 
 
\t \t jsonData:data, 
 
\t \t name:'template1' 
 
\t }); 
 
});

<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

1- array Iterazione con forEach
2- verificare l'esistenza delle chiavi nei dizionari utilizzando object.hasOwnProperty
3- creare elementi html con stringa $("< type-of-element >")
4- configurazione in formato desiderato.

Si può provare questo 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) 
} 

questo otterrà l'output HTML:

<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 3

versione jQuery di questo problema (campione dal vivo):

• .each di iterare serie
• .appendTo per aggiungere un figlio a un genitore
• .text per impostare il contenuto del testo di un elemento

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 4

Si prega di utilizzare jQuery per ogni loop i dati JSON, qui durante ogni iterazione il valore html variabile è concatenata, in modo da poter aggiungere a qualsiasi 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 5

Naturalmente è anche possibile utilizzare AngularJS per questo, è uno dei principali punti di angolare che è molto facile associare i dati.

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"> 
 
\t <li>{{c.country}}</li> 
 
\t <ul> 
 
\t \t <li ng-repeat="s in c.state">{{s.name}} :{{s.capital}}</li> 
 
\t </ul> 
 
</ul> 
 
</div>