0
JSONファイルをループして関連するコンテナに追加しようとしています。これには2つのレベル、第1レベルと第2レベルがあります。第1レベルにはハンドルタイプ（Victorian、Chrissi、Garda）があり、第2レベルには仕上げ（Brass、Chrome、Satin Nickel）があります。私の問題は、2番目のレベルになると、関連するハンドルタイプにオプションをグループ化するのが難しいことです。私はこれが理にかなってほしい。JSONを関連情報付きのHTMLコンテナに追加する
「Victorian」をクリックすると、「Victorian」仕上げオプションのみを使用して次のメニューが読み込まれます。私は一緒にメニューをリンクするためにデータトリガー/データターゲット属性を使用しています。
はここでそれが動作するはず方法は次のとおりです。
Screenshot for Menu 1 Screenshot for Menu 2
ドアハンドルアイコンをクリックし、それは次のオプションを与える最初のメニューをロードします： -
タイトル=家族
を選択します。オプション= Victorian - Chrissi - Garda。
あなたはその後、「ヴィクトリアン」をクリックし、そしてそれはあなたのビクトリア朝の仕上げオプションを提供しますので、次のメニューは次のようになります -
タイトル=選択して仕上げを
オプション=真鍮、クローム、サテンニッケル（選択したタイプに基づいて）
他のオプションも同じです。これは、私の知る限りが来ている
{
"Families": {
"title": "Choose a family",
"options": [
{
"name": "Victorian",
"thumbnail": "/modules/DoorSelector/images/victorian_thumb.jpg",
"options": {
"title": "Choose a finish",
"options": [
{
"name": "Brass",
"thumbnail": "/modules/DoorSelector/images/victorian_brass.jpg",
"material": "brass",
"sku": "DFU0611"
},
{
"name": "Chrome",
"thumbnail": "/modules/DoorSelector/images/victorian_chrome.jpg",
"material": "chrome",
"sku": "DFU0611"
},
{
"name": "Satin Nickel",
"thumbnail": "/modules/DoorSelector/images/victorian_satin_nickel.jpg",
"material": "satin_nickel",
"sku": "DFU0611"
}
]
}
},
{
"name": "Chrissi",
"thumbnail": "/modules/DoorSelector/images/chrissi_thumb.jpg",
"options": {
"options": [
{
"name": "Brass",
"thumbnail": "/modules/DoorSelector/images/chrissi_brass.jpg",
"material": "brass",
"sku": "Chrissi"
},
{
"name": "Chrome",
"thumbnail": "/modules/DoorSelector/images/chrissi_chrome.jpg",
"material": "chrome",
"sku": "Chrissi"
},
{
"name": "Satin Nickel",
"thumbnail": "/modules/DoorSelector/images/chrissi_satin_nickel.jpg",
"material": "satin_nickel",
"sku": "Chrissi"
}
]
}
},
{
"name": "Garda",
"thumbnail": "/modules/DoorSelector/images/garda_thumb.jpg",
"options": {
"options": [
{
"name": "Brass",
"thumbnail": "/modules/DoorSelector/images/garda_brass.jpg",
"material": "brass",
"sku": "DFU0820"
},
{
"name": "Chrome",
"thumbnail": "/modules/DoorSelector/images/garda_chrome.jpg",
"material": "chrome",
"sku": "DFU0820"
},
{
"name": "Satin Nickel",
"thumbnail": "/modules/DoorSelector/images/garda_satin_nickel.jpg",
"material": "satin_nickel",
"sku": "DFU0820"
}
]
}
}
]
}
}
：
は、ここでJSONファイルです。ご覧のように、2番目のレベルオプション/仕上げになると、すべてのものを表示するだけです。
私の現在のHTML：
<div data-target="handles" class="handlesOuterContainer show">
<div class="levelOneHandles">
<p class="menuTitle">Choose a family</p>
<div class="menuOption"><img class="familyThumbnail back" src="/modules/DoorSelector/images/arrow_back.jpg">
</div>
<div data-trigger="handles_victorian" class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_thumb.jpg">
<p class="familyTitle">Victorian</p>
</div>
<div data-trigger="handles_chrissi" class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_thumb.jpg">
<p class="familyTitle">Chrissi</p>
</div>
<div data-trigger="handles_garda" class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_thumb.jpg">
<p class="familyTitle">Garda</p>
</div>
</div>
<div data-target="handles_victorian" class="levelTwoHandles">
<div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_brass.jpg">
<p class="familyTitle">Brass</p>
</div>
<div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_chrome.jpg">
<p class="familyTitle">Chrome</p>
</div>
<div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/victorian_satin_nickel.jpg">
<p class="familyTitle">Satin Nickel</p>
</div>
</div>
<div data-target="handles_chrissi" class="levelTwoHandles">
<div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_brass.jpg">
<p class="familyTitle">Brass</p>
</div>
<div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_chrome.jpg">
<p class="familyTitle">Chrome</p>
</div>
<div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/chrissi_satin_nickel.jpg">
<p class="familyTitle">Satin Nickel</p>
</div>
</div>
<div data-target="handles_garda" class="levelTwoHandles">
<div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_brass.jpg">
<p class="familyTitle">Brass</p>
</div>
<div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_chrome.jpg">
<p class="familyTitle">Chrome</p>
</div>
<div class="menuOption"><img class="familyThumbnail" src="/modules/DoorSelector/images/garda_satin_nickel.jpg">
<p class="familyTitle">Satin Nickel</p>
</div>
</div>
</div>
はJQuery：
$.getJSON("/modules/DoorSelector/handles.json", function(data){
var levelOneHandlesContainer = '.levelOneHandles';
// main container title
$(levelOneHandlesContainer).append('<p class="menuTitle">'+data.Families.title+'</p>');
// back button
$(levelOneHandlesContainer).append('<div class="menuOption"><img src="/modules/DoorSelector/images/arrow_back.jpg" class="familyThumbnail back"></div>');
// loop through objects
$.each(data.Families.options, function(index, value) {
// write options to container
$(levelOneHandlesContainer).append('<div class="menuOption" data-trigger="handles_'+value.name.toLowerCase()+'"><img src='+value.thumbnail+' class="familyThumbnail" /><p class="familyTitle">'+value.name+'</p></div>');
// second level
$.each(this, function(index, value2) {
$.each(this.options, function(index, value3) {
$('.handlesOuterContainer').append('<div class="levelTwoHandles" data-target="handles_'+value.name.toLowerCase()+'"><div class="menuOption"><img src='+value3.thumbnail+' class="familyThumbnail" /><p class="familyTitle">'+value.name+'</p></div></div>');
});
});
});
});
入力いただきありがとうございます。私はこれに論理を書き直すつもりです。私の問題は、あなたの選択に基づいて、最初のメニューを2番目のメニューにグループ化することができないということです。私のそれぞれのループはただちにすべてを出力しています。 – Madness
for-inループを使用して構造体を作成するとよいでしょう。さらなる情報提供/説明については、http：//stackoverflow.com/questions/2549320/looping-through-an-object-tree-recursivelyを参照してください。 – MattDiMu
ありがとうございました。 – Madness