Làm thế nào để phân tích cú pháp đa chiều JSON sang html một cách dễ dàng?

Question

Tôi muốn phân tích cú pháp json thành html dễ dàng. Tôi có một đứa con trai đa chiều. vì vậy tôi muốn phân tích cú pháp này thành html dễ dàng. bất kỳ plugin hoặc bất kỳ mã đơn giản nào đều có sẵn? Tệp json sau của tôi.

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

html là như thế này.

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

Tôi muốn để có được sản lượng như này nào là tốt nhất và cách đơn giản nhất để có được kết quả này?

Answer 1

Bạn có thể sử dụng jquery jput cắm (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- mảng Lặp lại với forEach
2- kiểm tra sự tồn tại của các phím trong từ điển sử dụng object.hasOwnProperty
3 tạo các yếu tố html với $("< type-of-element >")
4 xây dựng chuỗi trong định dạng mong muốn.

Bạn có thể thử kịch bản này:

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

này sẽ nhận được đầu ra 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 phiên bản của vấn đề này (live mẫu):

• .each để lặp qua mảng
• .appendTo để thêm trẻ em vào cha mẹ
• .text để thiết lập nội dung văn bản của một phần tử

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

Vui lòng sử dụng jquery cho mỗi vòng lặp dữ liệu JSON, ở đây trong mỗi lần lặp giá trị html biến được nối, vì vậy bạn có thể nối thêm vào bất kỳ DIV nào.

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

Tất nhiên bạn cũng có thể sử dụng AngularJS cho điều này, đó là một trong những điểm chính của góc đó nó rất dễ dàng để ràng buộc dữ liệu.

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>