Halo Finder

class Chat extends Model {


    protected $table = "chat";


    protected $appends = ['gamertag', 'slug'];


    /**
     * The attributes that are mass assignable.
     *
     * @var array
     */
    protected $fillable = [
        'message', 'user_id'
    ];


    public function user() {
        return $this->belongsTo('App\User');
    }


    public function getGamertagAttribute()
    {
        return $this->user->gamertag;
    }

    public function getSlugAttribute()
    {
        return $this->user->slug;
    }
    
}







<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script>
<script>

    new Vue ({
        el: 'body',

        data: {
            messages: [

            ]
        }
    });


    var pusher ="";
    var channel ="";
    var html ="";
    pusher = new Pusher("{{env("PUSHER_KEY")}}");
    channel = pusher.subscribe('chat_channel');
    Pusher.log = function(message) {
        if (window.console && window.console.log) {
            window.console.log(message);
        }
    };
    channel.bind('App\\Events\\MessageSent', function(data){
        console.log(data);
        $('#chat-box-message').empty(html);
        for (var i = 0; i< data.length; i++) {

            for (var key in data) {  //empty the div for append does not repeat
                var obj = data[key];
                for (var prop in obj) {

                    $('#chat-box-message').append(
                        '<div class="comment">'+
                            '<a class="avatar">'+
                                '<img src="/finder/public/images/logo.svg">'+
                            '</a>'+
                            '<div class="content">'+
                                '<a href="/finder/profile/' +obj[prop]['slug']+ '" class="author">' +obj[prop]['gamertag']+ '</a>'+
                                '<div class="metadata">' + new Date(obj[prop]['created_at']) + '</div>'+
                                '<div class="text">' +
                                    obj[prop]['message']+
                                '</div>'+
                            '</div>'+
                        '</div>'
                    );
                }
            }
        }
    });
</script>