Question

所以目前我正在尝试创建一个可以在整个应用程序中重复使用的点击事件，

导航的基本流程，是用户点击链接，点击该链接将获得getJSON请求，JSON被解析并返回到subnav，但是我有点不紧张的地方是访问JSON中的正确对象以循环创建子导航，下面是我的代码。

$(".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，那么将= =“门”，然后我将其汇总到{{1但是当循环时，我得到他的错误，

未捕获的TypeError：无法使用'in'运算符在data.doors中搜索'9'

似乎我无法根据点击进入我需要的对象，但必须有办法吗？

Answer 1

我这样做是为了快速测试：

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);我得到了

未捕获的SyntaxError：意外的数字

所以也许尝试这样做：

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

它应该有效，因为你的JSON是有效的！

Answer 2

如果我理解正确，您正试图迭代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>');
        });
        //...

jquery fetchJSON选择正确的对象

2 个答案: