如何解析JSON到嵌套的HTML列表構造

Question

我試過這與XML，但從Firefox到IE瀏覽器的行爲是奇怪的。 我以前沒有使用JSON，所以任何幫助將不勝感激。

這裏是我的JSON：

{ 
    "storeList":{ 
     "state":[ 
     { 
      "stateName":"Maine", 
      "store":[ 
       { 
        "storeName":"Store 1", 
        "storeID":"store1", 
        "storeURL":"http:\/\/www.sitename.com" 
       }, 
       { 
        "storeName":"Store 2", 
        "storeID":"store2", 
        "storeURL":"http:\/\/www.sitename.com" 
       }, 
       { 
        "storeName":"Store 3", 
        "storeID":"store3", 
        "storeURL":"http:\/\/www.sitename.com" 
       } 
      ] 
     }, 
     { 
      "stateName":"Connecticut", 
      "store":[ 
       { 
        "storeName":"Store 1", 
        "storeID":"store1", 
        "storeURL":"http:\/\/www.sitename.com" 
       } 
      ] 
     } 
     ] 
    } 
} 

我要去的結構 -

<div id="storeList"> 
    <ul> 
     <li> 
      <h3>State Name 1</h3> 
      <a href="storeurl" id="storeid">storename</a> 
      <a href="storeurl" id="storeid">storename</a> 
     </li> 
     <li> 
      <h3>State Name 2</h3> 
      <a href="storeurl" id="storeid">storename</a> 
     </li> 
    </ul> 
</div> 

更新

嘗試下面的解決方案，裝載從該JSON外部文件，但我得到一個錯誤，該對象未定義：

$(document).ready(function() { 
        var object; 
        $.getJSON('xml/storeList.json', function(json) { 
         object = json; 
        }); 


        $('#storeList').append('<ul/>') 
        $.each(object.storeList.state, function() { 
         var list = $('#storeList ul'), 
         listItem = $('<li/>'), 
         html = listItem.append($('<h3/>').text(this.stateName)); 

         $.each(this.store, function() { 
         listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName)); 
         }); 

         list.append(html) 
        }); 
        }); 

Answer 1

這裏有一個簡單的例子：

$('#storeList').append('<ul/>') 
$.each(object.storeList.state, function() { 
    var list = $('#storeList ul'), 
     listItem = $('<li/>'), 
     html = listItem.append($('<h3/>').text(this.stateName)); 

    $.each(this.store, function() { 
     listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName)); 
    }); 

    list.append(html) 

}); 

Example

編輯

var object; 
$.getJSON('xml/storeList.json', function(json) { 
    object = json; 
    $('#storeList').append('<ul/>') 
    $.each(object.storeList.state, function() { 
     var list = $('#storeList ul'), 
      listItem = $('<li/>'), 
      html = listItem.append($('<h3/>').text(this.stateName)); 

     $.each(this.store, function() { 
      listItem.append($('<a />').attr('href', this.storeURL).text(this.storeName)); 
     }); 

     list.append(html) 
    }); 
}); 

Answer 2

JSON不過是JavaScript的一個子集對象的文字符號，允許嵌套的對象和/或陣列o您將需要研究Javascript對象和數組數據結構。這就是說，一旦你的「裸」json被分配給一個變量，讓我們假設「json」（通過預先考慮「json =」測試），你可能開始使用你的JSON以下面的方式工作，只是你將與​​一個數組：

for (var i=0, n=json.storeList.state.length; i<n; i++) { 
    var state = json.storeList.state[i]; 
    console.log(state.stateName); //Maine, then Connecticut 
    for (var j=0, k=state.store.length; j<k; j++) { 
     var store = state.store[j]; //the object containing store name, id & URL 
     console.log(store.storeID); 
    } 
} 

PS ....我的回答是「純粹」的Javascript，而不是使用jQuery，所以如果你致力於做的事情jQuery的方式，肯定會考慮其他的答案。但是，如果您需要切換，那麼熟悉各種框架背後的Javascript基礎（如jQuery，ExtJS等等）是很好的。

Answer 3

使用jQuery的$.each()函數來遍歷對象屬性，並且只是遍歷數組的迭代循環的標準。

這裏有一個工作示例：http://jsfiddle.net/qZ6U4/

，代碼：

var htmlStr = ''; 

$.each(myObj, function(i,v){ 
    htmlStr += '<div id="' + i + '">'; 
    $.each(v, function(i, v){ 
     htmlStr += '<ul>'; 
     for(var i = 0; i < v.length; i++){ 
      htmlStr += '<li><h3>' + v[i].stateName + '</h3>'; 
      for(var n = 0; n < v[i].store.length; n++){ 
       var store = v[i].store[n]; 
       htmlStr += '<a href="' + store.storeURL + '" id="' + store.storeID + '">' + store.storeName + '</a>'; 
      } 
      htmlStr += '</li>'; 
     } 
     htmlStr += '</ul>'; 
    }); 
    htmlStr += '</div>'; 
}); 

Answer 4

我會用一個模板引擎。隨着模板引擎，你可以這樣定義模板（這是很容易閱讀和維護）：

<script id="template" type="text/x-jquery-tmpl"> 
    <ul> 
     {{#each state}} 
     <li> 
      <h3>{{=stateName}}</h3> 
      {{#each store}} 
      <a href="{{=storeURL}}" id="{{=storeID}}">{{=storeName}}</a> 
      {{/each}} 
     </li> 
     {{/each}} 
    </ul> 
</script> 

，然後只需撥打

$("#storeList").html(
    $("#template").render(json.storeList) 
); 

來填補你的DIV

<div id="storeList"></div> 

我有一個demo ready。我在這裏使用的模板引擎是JsRender。