开发Discord bot时JSON管理成员数据渲染至HTML表格异常问题咨询

根因说明 #

1. 接口返回的数据是键值对对象，不是数组，没有length属性，原有使用数组下标遍历的逻辑不会执行
2. 成员ID是对象的键名，不是存放在属性值中的id字段，原有data[i].id的取值逻辑错误

修复后的代码 #

你之前注释掉的$.each遍历思路是正确的，仅需调整参数取值即可：

viewReport : function() {
    $.ajax({
        url: "http://localhost/api/data/",
        dataType: "json",
        method : 'GET',
        success : function(data){
            // 清空原有表格内容，避免重复渲染
            $('#report tbody').empty();
            // 遍历对象键值对，第一个参数为成员ID，第二个参数为对应统计数据
            $.each(data, function(memberId, stats){
                let tr = $('<tr/>');
                tr.append("<td>" + memberId + "</td>");
                tr.append("<td>" + stats.registrar + "</td>");
                tr.append("<td>" + stats.totaljoin + "</td>");  
                $('#report tbody').append(tr);
            });
            // 如果你用了DataTable插件需要重绘，可放开下面一行注释
            // $('#report').DataTable().draw();
        }
    })
}

如果你偏好使用原生for循环遍历，可以用Object.keys把对象键转为数组后再遍历：

success : function(data){
    $('#report tbody').empty();
    const memberIdList = Object.keys(data);
    for (let i = 0; i < memberIdList.length; i++) {
        const memberId = memberIdList[i];
        const stats = data[memberId];
        let tr = $('<tr/>');
        tr.append("<td>" + memberId + "</td>");
        tr.append("<td>" + stats.registrar + "</td>");
        tr.append("<td>" + stats.totaljoin + "</td>");  
        $('#report tbody').append(tr);
    }               
}

内容的提问来源于stack exchange，提问作者KRAL-P