Jak łatwo parsować wielowymiarowy JSON do html?

Question

Chcę łatwo parsować json do html. Mam wielowymiarowy json. więc chcę łatwo parsować to do html. dostępna jest jakaś wtyczka lub jakikolwiek prosty kod? Następujący mój plik json.

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

Ten html jest taki.

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

chcę uzyskać wyjście jak ten czego najlepszym i najprostszym sposobem, aby to wyjście?

Answer 1

Można użyć 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>

Answer 2

1- tablice iteracyjne z forEach
2- sprawdza istnienie kluczy w słownikach za pomocą object.hasOwnProperty
3- tworzenia elementów wraz z $("< type-of-element >")
4- budowy łańcucha w pożądanym formacie.

Można spróbować tego skryptu:

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

to dostanie wyjście 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

jQuery wersja tego problemu (próbki na żywo):

• .each iteracyjne nad tablicę
• .appendTo dodać dziecko do rodzica
• .text ustawić zawartość tekstową elementu

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

Proszę używać jQuery dla każdej pętli danych JSON, tutaj podczas każdej iteracji wartość zmiennej HTML jest łączone, więc można dołączyć do dowolnego 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

Oczywiście można również użyć angularjs na to, że to jeden z głównych punktów kanciasty, że jest bardzo łatwy do wiązania danych.

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>