在jquery中遍历一个json

Iterating through a json in jquery

本文关键字：一个 json jquery 遍历      更新时间：2023-09-26

请帮忙，伙计们。

在 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（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
        });
    }

这里的问题是您在更改的处理程序之外引用值，因此保留最后一个值。 

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
    });
}

在 ajax 之外尝试这个简单的代码

您将使用事件委派，并从动态添加的 dom 元素的 id 中选择 id

  $('ul').on('click','div[id^="edit"]',function() {
                    var userId = $(this).attr('id').substring(4);
                    $('#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
                });
相关文章：