javascript - jquery fetchJSON 选择正确的对象

Question

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

导航的基本流程是用户点击一个链接，点击该链接将收到一个 getJSON 请求，JSON 被解析并在子导航中返回，但是我有点不明白的地方是访问 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 将 = 到“doors”，然后我将其连接到到 data. 但是当遍历它时我得到了他的错误，

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

似乎我无法通过点击进入我需要的对象，但一定有办法吗？

Answer 1

如果我没理解错的话，您正在尝试遍历 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>');
        });
        //...