javascript - 如何在 SweetAlert 中而不是在对象上显示值

Question

我正在使用带有 html attr 的甜蜜警报库，但我需要在 swal 中显示循环中的一些值，我得到的只是 [object object] 我不知道不知道为什么。

这是我的代码:

$(".track_details").click(function () {
    var data = $(this).data('val');
    swal({
        title: "HTML <small>Title</small>!",
        text: "<div class='row'>\
        <div class='col-md-2'>\
        <strong>\
            <span>Message</span>\
        </strong>\
    </div>\
        <div class='col-md-2'>\
        <strong>\
            <span>Status</span>\
        </strong>\
    </div>\
    <div class='col-md-2'>\
        <strong>\
            <span>Datetime</span>\
        </strong>\
    </div>\
    <div class='col-md-2'>\
        <strong>\
            <span>City</span>\
        </strong>\
    </div>\
   <div class='col-md-1'>\
        <strong>\
            <span>State</span>\
        </strong>\
    </div>\
    <div class='col-md-1'>\
        <strong>\
            <span>Zip</span>\
        </strong>\
    </div>\
     <div class='col-md-2'>\
        <strong>\
            <span>Country</span>\
        </strong>\
    </div>\
    </div> <div class='row my_tracking_swal'></div> \
    " + $.each(data, function (index, val) {
            $("<div class='col-md-2'>\
        <strong>\
            <span>" + val.tracking_status + "</span>\
        </strong>\
    </div>\
        <div class='col-md-2'>\
        <strong>\
            <span>" + val.tracking_status + "</span>\
        </strong>\
    </div>\
    <div class='col-md-2'>\
        <strong>\
            <span>" + val.tracking_status + "</span>\
        </strong>\
    </div>\
    <div class='col-md-2'>\
        <strong>\
            <span>" + val.tracking_status + "</span>\
        </strong>\
    </div>\
    <div class='col-md-1'>\
    <strong>\
            <span>" + val.tracking_status + "</span>\
        </strong>\
    </div>\
    <div class='col-md-1'>\
       <strong>\
            <span>" + val.tracking_status + "</span>\
        </strong>\
    </div>\
    <div class='col-md-2' >\
     <strong>\
            <span>" + val.tracking_status + "</span>\
        </strong>\
    </div>\
    ").appendTo(".my_tracking_swal");
        }),

        html: true
    }) ;

});

我的数据值看起来像 [{'tracking_status':'value'},{'tracking_status':'value'},{'tracking_status':'value'}]

Answer 1

目前您正在将字符串与对象连接起来。这就是您收到 [object object] 字符串作为结果的原因。

你最好单独从数据数组创建一个 HTML 字符串然后将它与您粘贴到 swal 中的 HTML 连接起来。

这将有助于:

var data = $(this).data('val');

var myTrackingContent = data.map(function(item) { 
    return "<div class='col-md-2'><strong><span>" + item.tracking_status + "</span> </strong></div>";
}).join('');

swal({
    title: "HTML <small>Title</small>!",
    text: "...<div class='row my_tracking_swal'>" + myTrackingContent + "</div>...",
    html: true
}) ;