Laravel AJAX GET and show new data

Question

I've been working on a project and thus far I've been able to POST to the database using AJAX, so when the user submits data the page wont refresh but the data is still uploaded to the database.

Now what I want to do, is show those results to the user without needing to refresh the page. I've spent a lot of time trying to figure it out but right now I'm very stuck. Could anyone point me in the right direction? I've read the documentation on the website, watched hours worth of videos but still have no luck.

The code I have so far.

Script

$.ajax({
    type: 'GET', //THIS NEEDS TO BE GET
    url: '{{$video->id}}/shownew',
    success: function (data) {
        console.log(data);
        $("#data").append(data);
    },
    error: function() { 
         console.log(data);
    }
});

Controller

public function shownew($video)
{
    $getstamps = DB::table('timestamps')
                    ->where('videoid', '=', $video)
                    ->orderByRaw('LENGTH(timestamp_time)', 'ASC')
                    ->orderBy('timestamp_time', 'asc')
                    ->get();

    return response()->json(array('success' => true, 'getstamps' => $getstamps));
}

Console

{success: true, getstamps: Array(3)}
getstamps: Array(3)
    0: {
        timestamp_id: 128,
        videoid: "5",
        timestamp_name: "Title",
        timestamp_time: 1,
        created_at: "2017-10-04 23:28:12",
        …
    }
    1: {
        timestamp_id: 129,
        videoid: "5",
        timestamp_name: "1",
        timestamp_time: 1,
        created_at: "2017-10-04 23:41:01",
        …
    }
    2: {
        timestamp_id: 130,
        videoid: "5",
        timestamp_name: "1",
        timestamp_time: 1,
        created_at: "2017-10-04 23:41:21",
        …
    }
length: 3
__proto__: Array(0)
success: true
__proto__: Object

Answer 1

This fixed the issue.

        $.ajax({
        type: 'GET', //THIS NEEDS TO BE GET
        url: '{{$video->id}}/shownew',
        dataType: 'json',
        success: function (data) {
            console.log(data);
            container.html('');
            $.each(data, function(index, item) {
            container.html(''); //clears container for new data
            $.each(data, function(i, item) {
                  container.append('<div class="row"><div class="ten columns"><div class="editbuttoncont"><button class="btntimestampnameedit" data-seek="' + item.timestamp_time + '">' +  new Date(item.timestamp_time * 1000).toUTCString().match(/(\d\d:\d\d:\d\d)/)[0] +' - '+ item.timestamp_name +'</button></div></div> <div class="one columns"><form action="'+ item.timestamp_id +'/deletetimestamp" method="POST">' + '{!! csrf_field() !!}' +'<input type="hidden" name="_method" value="DELETE"><button class="btntimestampdelete"><i aria-hidden="true" class="fa fa-trash buttonicon"></i></button></form></div></div>');
          });
                container.append('<br>');
            });
        },error:function(){ 
             console.log(data);
        }
    });