在Bootstrap 4 Popover内部动态创建列表组

Question

我正在尝试创建导航栏通知系统。

我已经对我的api进行了设置，该api返回了我想迭代的JSON对象数组，但是，我试图将for循环动态推入popover的内容中，失败了。

当某人单击该图标时（就像大多数社交媒体网站一样），弹出窗口应跳出通知列表。

这是导航栏列表项html。

<li class="nav-item notification">
                <a class="nav-link notification-popover" href="#" tabindex="0" html="true" data-container="body" data-toggle="popover" title="Notifications" data-trigger="focus" data-placement="bottom" data-content="">
                    <i class="fa fa-bell navbar-icon notifications"></i>
                    <span class="badge badge-pill badge-danger js-notification-count hide"></span>
                </a>
            </li>

到目前为止，这是我的js-api仍在工作，这就是我如何在弹出窗口的内容中放入for循环。

 $.ajax({
        dataType: "json",
        type: "GET",
        url: "/api/notifications",
        success: function (notifications) {
            console.log(notifications);



            //make sure there is more than one notification
            if (notifications.length > 0) {
                console.log(notifications)
                $(".js-notification-count")
                    .text(notifications.length)
                    .removeClass('hide');


                $('.notification-popover').popover({
                    content: function () {
                        "<ul>" +
                            "<li>Hi</li>" +
                        "</ul>"
                    }
                })



            }
        },
        error: function (error) {
            console.log("error is " + error)
        }
    })