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。

Answer 2

这是一个简单的例子：

$('#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 3

JSON只是允许嵌套对象和/或数组的Javascript对象文字符号的子集，因此您需要研究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的方式做事，那肯定要考虑其他答案。但是熟悉jQuery，ExtJS等各种框架背后的Javascript基础是很好的，万一你需要切换。

Answer 4

使用jQuery的$.each()函数迭代对象属性，只是循环标准for循环数组。

以下是一个有效的例子：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>';
});

如何将json解析为嵌套的html列表结构

4 个答案: