jsonを入れ子にしたhtmlリストストラクチャにパースする方法

Question

xmlでこれを試しましたが、動作はFirefoxからIEまでは奇妙でした。 私は前にjsonと仕事をしていないので、どんな助けもありがたいです。からJSONをロードし、以下のソリューションを試してみました

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

アップデート -

{ 
    "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" 
       } 
      ] 
     } 
     ] 
    } 
} 

と私はつもり構造：ここ

は私の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

EDIT

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オブジェクトリテラル表記法のサブセットに過ぎません配列、および/または配列あなたは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のjQueryを使用するのではなく....私の答えは、「純粋」のJavascriptあるので、あなたはjQueryの道を物事を行うにコミットしている場合は、間違いなく他の回答を検討します。しかし、切り替えが必要な場合に備えて、jQuery、ExtJSなどのさまざまなフレームワークの背後にあるJavascript基盤についてよく知っておくとよいでしょう。

Answer 3

jQueryの$.each()関数を使用してオブジェクトのプロパティを反復処理し、配列の反復処理のループの標準を使用します。私は、テンプレートエンジンを使用することになり

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

：http://jsfiddle.net/qZ6U4/

とコード：

はここで働い例です。テンプレートエンジンを使用すると、そのように（読み取りおよび保守が容易である）あなたのテンプレートを定義することができます：あなたのdiv埋めるために

<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 id="storeList"></div> 

私はdemo readyです。ここで使用するテンプレートエンジンはJsRenderです。