javascript - 如何将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

我会使用模板引擎。使用模板引擎，您可以像这样定义模板(易于阅读和维护):

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