2013-05-08 44 views
2

因此,在這一刻,我想創建在我的應用程序,它可以重新使用的點擊事件,jQuery的fetchJSON選擇正確的對象

資產淨值的基本流程,是用戶會點擊一個鏈接,單擊該鏈接將得到一個getJSON請求,JSON被解析並返回到一個subnav中,但是我稍微鬆了一點就是在JSON中訪問正確的對象以循環創建sub-nav,在下面是我的代碼。

$(".primary a").on("click", function(e){ 

    var type = "data."+$(this).data('type'); 

    if($(".secondary").hasClass("bounceInUp")) { 
     $(".secondary").removeClass("bounceInUp").addClass("bounceOutDown"); 
    } 

    $.getJSON("js/data.json", function(data){ 

     var items = []; 

     $.each(data, function(key, val){ 
      items.push('<li><a href="" data-name="'+ val +'"><img src="img/wood-nav.jpg" /></a></li>'); 
     }); 

     console.log(items); 
     $(".secondary ul").empty(); 
     $(".secondary ul").html(items); 
     $(".secondary").removeClass("bounceOutDown").addClass("animated bounceInUp"); 

    }); 
    e.preventDefault(); 

}); 

我的JSON如下所示,

{ 
    "doors" : { 
     "1" : "door 1", 
     "2" : "door 2", 
     "3" : "door 3", 
     "4" : "door 4", 
     "5" : "door 5", 
     "6" : "door 6", 
     "7" : "door 7", 
     "8" : "door 8", 
     "9" : "door 9", 
     "10": "door 10" 
    }, 

    "handles" : { 
     "1" : "handle 1", 
     "2" : "handle 2", 
     "3" : "handle 3", 
     "4" : "handle 4", 
     "5" : "handle 5", 
     "6" : "handle 6", 
     "7" : "handle 7", 
     "8" : "handle 8", 
     "9" : "handle 9", 
     "10": "handle 10" 
    }, 

    "worktops" : { 
     "1" : "worktop 1", 
     "2" : "worktop 2", 
     "3" : "worktop 3", 
     "4" : "worktop 4", 
     "5" : "worktop 5", 
     "6" : "worktop 6", 
     "7" : "worktop 7", 
     "8" : "worktop 8", 
     "9" : "worktop 9", 
     "10": "worktop 10" 
    }, 

    "floors" : { 
     "1" : "floor 1", 
     "2" : "floor 2", 
     "3" : "floor 3", 
     "4" : "floor 4", 
     "5" : "floor 5", 
     "6" : "floor 6", 
     "7" : "floor 7", 
     "8" : "floor 8", 
     "9" : "floor 9", 
     "10": "floor 10" 
    }, 

    "walls" : { 
     "1" : "wall 1", 
     "2" : "wall 2", 
     "3" : "wall 3", 
     "4" : "wall 4", 
     "5" : "wall 5", 
     "6" : "wall 6", 
     "7" : "wall 7", 
     "8" : "wall 8", 
     "9" : "wall 9", 
     "10": "wall 10" 
    } 

} 

什麼有一個我已經嘗試過?我已經嘗試在循環之外構建數據對象名稱,然後將其傳入,因此,如果我點擊了門,例如var type會然後=「門」,然後我將其聯合到data.然而,當循環通過I得到他的錯誤,

Uncaught TypeError: Cannot use 'in' operator to search for '9' in data.doors

看來,我不能進入我需要基於點擊的對象,但必須有一種方式嗎?

回答

0

如果我理解正確,您試圖迭代type變量,這是一個string

var type = "data."+$(this).data('type'); 

試試這個:

var type = $(this).data('type'); 

$.getJSON("js/data.json", function(data){ 

     var items = [], 
      data = data[type]; 

     $.each(data, function(key, val){ 
      items.push('<li><a href="" data-name="'+ val +'"><img src="img/wood-nav.jpg" /></a></li>'); 
     }); 
     //... 
0

我做到了這一點作爲一個快速測試:

var temp = { 
"doors": { 
    "1": "door 1", 
    "2": "door 2", 
    "3": "door 3", 
    "4": "door 4", 
    "5": "door 5", 
    "6": "door 6", 
    "7": "door 7", 
    "8": "door 8", 
    "9": "door 9", 
    "10": "door 10" 
}, 
"handles": { 
    "1": "handle 1", 
    "2": "handle 2", 
    "3": "handle 3", 
    "4": "handle 4", 
    "5": "handle 5", 
    "6": "handle 6", 
    "7": "handle 7", 
    "8": "handle 8", 
    "9": "handle 9", 
    "10": "handle 10" 
}, 
"worktops": { 
    "1": "worktop 1", 
    "2": "worktop 2", 
    "3": "worktop 3", 
    "4": "worktop 4", 
    "5": "worktop 5", 
    "6": "worktop 6", 
    "7": "worktop 7", 
    "8": "worktop 8", 
    "9": "worktop 9", 
    "10": "worktop 10" 
}, 
"floors": { 
    "1": "floor 1", 
    "2": "floor 2", 
    "3": "floor 3", 
    "4": "floor 4", 
    "5": "floor 5", 
    "6": "floor 6", 
    "7": "floor 7", 
    "8": "floor 8", 
    "9": "floor 9", 
    "10": "floor 10" 
}, 
"walls": { 
    "1": "wall 1", 
    "2": "wall 2", 
    "3": "wall 3", 
    "4": "wall 4", 
    "5": "wall 5", 
    "6": "wall 6", 
    "7": "wall 7", 
    "8": "wall 8", 
    "9": "wall 9", 
    "10": "wall 10" 
} 
}; 

alert(temp.doors['9']); 

工作正常。

如果我做alert(temp.doors.9);我得到

Uncaught SyntaxError: Unexpected number

所以,也許試圖這樣做:

temp["subObjectName"]["subSubObjectName"]; 

,它應該工作作爲你的JSON是有效的!