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

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

州名1


州名2

更新

尝试了以下解决方案，从外部文件加载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)
                    });
                    });

$（文档）.ready（函数（）{
var对象；
$.getJSON（'xml/storeList.json'，函数（json）{
object=json；
});
$（“#存储列表”）.append（“
”）
$.each（object.storeList.state，function（）{
变量列表=$（“#存储列表ul”），
listItem=$（“
”），
html=listItem.append（$（''）.text（this.stateName））；
$.each（this.store，function（））{
追加（$（''）.attr（'href'，this.storeURL）.text（this.storeName））；
});
list.append（html）
});
});

以下是一个简单的示例：

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

});

$（“#存储列表”）.append（“
”）
$.each（object.storeList.state，function（）{
变量列表=$（“#存储列表ul”），
listItem=$（“
”），
html=listItem.append（$（''）.text（this.stateName））；
$.each（this.store，function（））{
listItem.append（$（'

编辑

var对象；
$.getJSON（'xml/storeList.json'，函数（json）{
object=json；
$（“#存储列表”）.append（“
”）
$.each（object.storeList.state，function（）{
变量列表=$（“#存储列表ul”），
listItem=$（“
”），
html=listItem.append（$（''）.text（this.stateName））；
$.each（this.store，function（））{
追加（$（''）.attr（'href'，this.storeURL）.text（this.storeName））；
});
list.append（html）
});
});
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);
    }
}

for（var i=0，n=json.storeList.state.length；i使用jQuery的
$。each（）
函数迭代对象属性，而仅使用标准for循环迭代数组

下面是一个工作示例：

以及守则：

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

var htmlStr=''；
$。每个（myObj，函数（i，v）{
htmlStr+=''；
$。每个（v，函数（i，v）{
htmlStr+='
'；
对于（变量i=0；i
我会使用模板引擎。使用模板引擎，您可以像这样定义模板（易于阅读和维护）：

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

填补你的空缺

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



我有一个。我在这里使用的模板引擎是。
我用这个从外部获取json文件没有任何成功。@Jason，我不明白你在说什么。我的json不是内联的，而是在单独的文件中。我正在尝试使用getJSON，但它对我来说工作不正常。@Jason然后请发布一个新问题来解释这一点，因为我这是你真正的问题。我只是想知道如何用你的解决方案从外部文件加载json，而不是内联json。json没有什么。如果你知道如何处理Javascript数据结构，你可以使用json。给定
var x=blah blah blah blah blah blah；
在某些Javascript中，json就是
blah blah blah
部分。一个经典的例子你认为在循环或字符串连接中附加DOM元素是更好的方法吗？18K javascript库是“大锤”吗如果一个简单的
for
循环也能同样清楚、更快地完成任务，那么使用库就是一把大锤。如果你不喜欢在循环中附加DOM元素，那么就把它们推到一个数组中，然后像你应该做的那样一次附加它们。我强烈反对。使用模板更容易维护，尊重概念的分离ns（我真的很讨厌在javascript代码中创建DOM元素），我个人觉得它更优雅。JsRender是个人的选择（为高性能而优化），但有些模板引擎只有20行代码（John Resig的微模板）。
$("#storeList").html(
    $("#template").render(json.storeList)
);

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