Laravel中的Pusher UI

Question

I try to get my pusher notifications in dropdown in menu, not sure how to do that, here is my js code:

<script type="text/javascript">
      var pusher = new Pusher('xxxxxxxxxxxxxx', {
        cluster: 'ap1',
        encrypted: true
      });

      var channel = pusher.subscribe('notify');
      channel.bind('notify-event', function(data) {
          alert(data.message);
      });
</script>

on alert i get my notification successfully, but what i'm looking for is to get them in html code below which is placed in my navbar:

<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" href="#"><span class="label label-pill label-danger count"></span> <span class="glyphicon glyphicon-bell"></span></a>

<ul class="dropdown-menu">
</ul>

This is what is look like html code above :

UPDATE

I changed my js code to:

<script type="text/javascript">
      var pusher = new Pusher('xxxxxx', {
        cluster: 'ap1',
        encrypted: true
      });

      var channel = pusher.subscribe('notify');
      channel.bind('notify-event', function(data) {
        $.each(data, function(key, value) {
            $('#notifs').append('<li>'+ value + ' ' + value +'</li>');
            });
      });
<script>

and my html to:

<ul class="dropdown-menu" id="notifs">
</ul>

Now I have result like:

PS: I've tried $('#notifs').append('<li>'+ value['message'] + ' ' + value['name'] +'</li>'); }); $('#notifs').append('<li>'+ value['message'] + ' ' + value['name'] +'</li>'); }); but it returned undefined so i just used value and that's what i get.

Answer 1

SOLVED

I didn't need to foreach the result just needed to use data itself.

+ data.message + ' ' + data.name +