2013-05-08 151 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是有效的!