javascript - 在 jquery 中迭代 json

Question

请大家帮忙。

在 Ajax 调用之后，我有一个包含两行(用户)的 JSON 对象。我有动态 ID，因为我打算在页面上加载一些内容(用于编辑用户详细信息的表单)。我的问题是 FOR 循环生成的每个用户行都具有相同的 ID。因此，所有 Ajax 生成的行都具有相同的 ID，在本例中为 48。 这是代码..

// Get the admin information
var loadAdmin = function() {
    $.ajax({
        type: 'GET',
        id: id,
        cache: false,
        url: 'scripts/administratorsList.php?id=' + id
    }).done(function(data) {
        var adminData = JSON.parse(data);

        for (var i in adminData) {
            var userId = adminData[i].id;
            $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

            // Add the edit form view here          
            $('#edit' + userId).on('click', function(userId) {
                var userId = adminData[i].id;
                $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
            });
        }
    });
};

下面是 JSON 文件

[{
    "id": "17",
    "userName": "Mark Bell",
    "userCompany": "Pro Movers",
    "userTelephone": "12345678911",
    "userEmail": "info@info.uk",
    "userPassword": "md5hash",
    "userUAC": "6",
    "originalUAC": "6",
    "userRegistered": "20150826",
    "activationKey": "0",
    "userLastLoggedIn": "20160302",
    "userBranch": "0",
    "userAdmin": "0"
}, {
    "id": "48",
    "userName": "demo",
    "userCompany": "Monstermove",
    "userTelephone": "12345678912",
    "userEmail": "info@info.uk",
    "userPassword": "demo",
    "userUAC": "6",
    "originalUAC": "6",
    "userRegistered": "20160305",
    "activationKey": "0",
    "userLastLoggedIn": "20160305",
    "userBranch": "3",
    "userAdmin": "3"
}]

提前致谢

通过 Jacub 的实现

for(adminData 中的 var i) {

        var userId = adminData[i].id;
        storeValueToRemainSame(userId);

    }

    function storeValueToRemainSame(userId) {
    $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

        // Add the edit form view here          
        $('#edit' + userId).on('click', function(userId) {
            var userId = adminData[i].id;
            $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
        });
    }

Answer 1

这里的问题是您引用了处理程序外部发生变化的值，因此保留了最后一个值。

for(var i in data) {
    var value = i;
    $('#someId').on('click', function(){
         console.log(value);
    });
}

唯一写入的值将是最后一个值，因为对其的引用将保留。 可能的解决方案例如:

function storeValueAndHandleClickEvent(value){
    $('#someId').on('click', function(){
         console.log(value);
    });
}

for(var i in data) {
    storeValueAndHandleClickEvent(i);
}

编辑:如果我使用与问题中相同的代码

for (var i in adminData) {
    var userId = adminData[i].id;
    storeValueToRemainSame(userId);
}

function storeValueToRemainSame(userId) {
    $('#adminList').append('<li class="media"><a href="#" class="media-link" id="edit' + userId + '"><div class="media-left"><img src="assets/images/placeholder.jpg" class="img-circle" alt=""></div><div class="media-body"><div class="media-heading text-semibold">' + adminData[i].userName + '</div><span class="text-muted">Administrator</span></div><div class="media-right media-middle text-nowrap"><span class="text-muted"><i class="icon-pin-alt text-size-base"></i>&nbsp;' + adminData[i].userCompany + '</span></div></a></li>')

    // Add the edit form view here          
    $('#edit' + userId).on('click', function(userId) {
        var userId = adminData[i].id;
        $('#userConfig').append('Here I will generate the form to edit user ' + userId); // This is where the ID stays the same. I have used .append over .html for debugging purposes. Each row returns an ID of 48
    });
}