使用$.each循环追加元素时页面显示[object]的问题排查

问题根源 #

页面显示[object]的核心原因是**$.each()的返回值不是你创建的DOM元素，而是遍历的原数组**。当你把$.each()的结果直接传给append()时，jQuery会把数组转换成字符串，最终就显示成了[object]。

简化代码的修正 #

原简化代码里，你试图把$.each()的结果直接append到tbody里，但$.each()返回的是strObj.data数组，不是创建的<tr>元素。正确做法是先创建tbody元素，再在$.each()内部把生成的tr追加到tbody中：

strObj = {"width":"12","id":"table_test","title":"Latest Indexed Pages","headers":[{"title":"Page Url"},{"title":"Country"},{"title":"Language"},{"title":"Status"}],"data":[[{"text":"/services","link":""}],[{"text":"/services","link":""}]]}

// 先创建tbody元素
let $tbody = $('<tbody>',{});
// 遍历数据，创建tr并追加到tbody
$.each(strObj.data, function(i, ii){
    $tbody.append($('<tr>',{}).append('<td></td>'));
});
// 最后把tbody加到目标table中
$('table').append($tbody);

完整代码的修正 #

完整代码同样犯了把$.each()返回值直接append的错误，修改方式一致：先创建tbody，在循环内往tbody里加tr，再把tbody加到table中：

let tableCreate_structure = $('<div>',{class: 'cold-'+tableCreate_width,'id':strObj.id}).append(
    $('<div>',{class:'card'}).append(
        $('<div>',{class:'card-header'}).append(
            $('<h3>',{class:'card-title'}).text(strObj.title)
        ),
        $('<div>',{class:'table-responsive'}).append(
            $('<table>',{class:'table table-vcenter card-table table-striped'}).append(
                $('<thead>',{}).append(tableCreate_headers),
                (function(){
                    // 单独处理tbody的创建和填充
                    let $tbody = $('<tbody>',{});
                    $.each(strObj.data, function(i, ii){
                        let $tr = $('<tr>',{});
                        // 遍历当前行的所有数据，生成对应的td
                        $.each(ii, function(j, item){
                            $tr.append($('<td>').text(item.text));
                        });
                        $tbody.append($tr);
                    });
                    return $tbody;
                })()
            )
        )
    )
); 
$('#content_body').append(tableCreate_structure);

替代方案（可选） #

如果想在一行内完成，可以用$.map()代替$.each()——$.map()会返回新的DOM元素数组，能直接被append()接收：

$('<tbody>',{}).append(
    $.map(strObj.data, function(i, ii){
        return $('<tr>',{}).append('<td></td>')[0]; // 需取出原生DOM元素，而非jQuery对象
    })
)

不过这种写法可读性稍弱，推荐优先使用先创建容器再追加的方式。

内容的提问来源于stack exchange，提问作者user3339418