Wie multidimensionale JSON leicht zu HTML analysieren?

Question

Ich möchte JSON leicht zu HTML analysieren. Ich habe einen mehrdimensionalen JSON. also möchte ich dies leicht zu HTML analysieren. Gibt es ein Plugin oder einen einfachen Code? Die folgende meine JSON-Datei.

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

Die HTML ist wie folgt.

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

Ich möchte wie diese Ausgabe erhalten, die beste und einfachste Weg, um diese Ausgabe zu bekommen?

Answer 1

Sie können 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(){ 
 
\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>

verwenden gesetzt

Answer 2

1- Iterate Arrays mit forEach
2- Überprüfung der Existenz von Schlüsseln in Wörterbücher verwendet object.hasOwnProperty
3- HTML-Elemente mit $("< type-of-element >")
4- build Zeichenfolge in gewünschtem Format erstellen.

können Sie dieses Skript versuchen:

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

dies wird die HTML-Ausgabe:

<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

jQuery-Version dieses Problem (live Probe):

• .each Array iterieren
• .appendTo ein Kind zu einem Elternteil hinzufügen
• .text zum Textinhalt eines Elements

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

Bitte verwenden jquery jeweils die JSON-Daten für Looping, hier während jeder Iteration der Variablen html Wert verketteten, so dass Sie in jedem DIV anhängen können.

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

Natürlich können Sie auch AngularJS dafür verwenden können, ist es einer der wichtigsten Punkte des Winkels, dass es sehr einfach ist, Daten zu binden.

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>