Как добавить список <li>после успеха?Laravel 5.6 Javascript / JQuery

Question

Я хотел бы добавить следующий код, если есть непрочитанное уведомление (read_at: null) из таблицы уведомлений ...

Это то, что я хочу добавить / добавить:

<li>
    <div class="an-info-single unread">
        <a href="{{url('iaccs-hook-list')}}">
        <span class="icon-container important">
            <i class="icon-setting"></i>
        </span>
        <div class="info-content">
            <h5 class="user-name">Update Client</h5>
        </div>
        </a>
    </div>
</li>

и это мой JS, который не работает.

$(document).ready(function(e) {

    var socket = io('http://www.iaccs-admin-console.test' + ':8080');
    socket.on("message", function(message){
    // console.log(message);
    // console.log('Received');

        $('.unread').on('click',function(){
            $.get('/markAsRead');
        });

        $.ajax({
            url: `/iaccs-hook-notifications`,
            method: 'GET',
            success: function(data){
                console.log(data)
                if (!$.trim(data)){   

                }
                else{   
                    if(data.notif[0].read_at === null ){
                        $('#btn-notif').addClass('js-has-new-notification');

                        var items = data.notif[0].read_at;

                        items.each(function(){
                            $('#notiflist li:first').prepend(`
                                <li>
                                    <div class="an-info-single unread">
                                        <a href="{{url('iaccs-hook-list')}}">
                                        <span class="icon-container important">
                                            <i class="icon-setting"></i>
                                        </span>
                                        <div class="info-content">
                                            <h5 class="user-name">Update Client</h5>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                            `);
                        });

                    }
                }


            },
            error: function(err){
                swal('Error!','Please report this issue.', 'error');
            }
        });

    });


});

Это данные из контроллера URL: / iaccs-hook-notifications,

0:
created_at: "2018-12-18 11:36:07"
data: []
id: "8fbadc27-ced7-4096-b65c-c8abd43d469f"
notifiable_id: 3
notifiable_type: "App\User"
read_at: null
type: "App\Notifications\WebhookNotification"
updated_at: "2018-12-18 11:36:07"
__proto__: Object
length: 1
__proto__: Array(0)

и где я хочу добавить список

<div class="an-info-content notifications-info notifications-content">

    <ul class="nav" id="notif-list">

    </ul>

</div> <!-- end .AN-INFO-CONTENT -->

Когда я нажимаю на маршрут, значок меняется, но не добавляется в список непрочитанных уведомлений.Я пытался использовать @forelse(auth()->user()->unreadNotifications as $notification), но мне нужно обновить страницу для отображения списка.

Answer 1

@ ziomikii У меня уже был рабочий JS ... но мне нужно исправить проблему ...

этот скрипт.

function notif(){
    $.ajax({
        url: `/iaccs-hook-notifications`,
        method: 'GET',
        success: function(data){
            // console.log(data)

            var items = data;

            if (data.length > 0) {
            //proceed
                if (!$.trim(data)){   

                }
                else{   
                    if(data[0].read_at === null ){
                        $('#btn-notif').addClass('js-has-new-notification'); 

                        items.forEach(function(value) {
                            console.log(value);
                            $('#notif-list').prepend(`
                                <li>
                                    <div class="an-info-single unread">
                                        <a href="{{url('iaccs-hook-list')}}">
                                            <span class="icon-container important">
                                                <i class="icon-setting"></i>
                                            </span>
                                        <div class="info-content">
                                            <h5 class="user-name">Update Client</h5>
                                        </div>
                                        </a>
                                    </div>
                                </li>
                            `);
                        });
                    }
                }
            } 

        },
        error: function(err){
            swal('Error!','Please report this issue.', 'error');
        }
    });
}


$(document).ready(function(e) {


    notif();

    var socket = io('http://www.iaccs-admin-console.test' + ':8080');
    socket.on("message", function(message){

        notif()

        // $('.unread').on('click',function(){
        //     $.get('/markAsRead');
        // });

    });

});

Answer 2

var items = data.notif[0].read_at; 

является одним значением, и вы не можете использовать .each

 var items = data.notif;

 items.each(function(){
     $('#notif-list').prepend(`
      <li>
          <div class="an-info-single unread">
              <a href="{{url('iaccs-hook-list')}}">
                 <span class="icon-container important">
                     <i class="icon-setting"></i>
                 </span>
               <div class="info-content">
                 <h5 class="user-name">Update Client</h5>
               </div>
              </a>
          </div>
        </li>
             `);
        });