How to avoid creating new row in table after javaScript call?

Question

I'm building a laravel application where I want to show if there is any update data in database after two seconds.So in this scenario I have given the table a 'id' and then I have laod the table after certain time interval. But the problem is after every javascript call it creates an empty row in table even if the table retrieve the value also. How do I avoid the problem..any suggestion please?

<div class="container">
            <h3> List Of Courses </h3></br>

            <table class="table table-striped table-bordered dataTable" id="example">
            <thead>
            <tr>
                <td>Serial No</td>
                <td>Title</td>
                <td>Description</td>                    
                <td>Action</td>
            </tr>
            </thead>
            <tbody>
            <?php $i=1; ?>
            @foreach($items as $row)

                <tr>
                    <td>{{$i}}</td>
                <td class="title" data-id1="{{$row->id}}" contenteditable>{{$row->title}}</td>  
                <td class="description" data-id2="{{$row->id}}" contenteditable>{{$row->description}}</td>  


                <td>    
                        <button type="button" onclick="deleteItem({{ $row->id }})" class="btn btn-danger">Delete</button>                   
                </td>

                </tr>

            <?php $i++; ?>

            @endforeach
            </tbody>
        </table>
        </div>

Here is the javascript I have to use to load the table after 3 seconds:

<script type="text/javascript">
  setInterval(function() {
    $("#example").load("list #example");                                
  }, 30000);
</script>   

Answer 1

You need to give load a callback and check if you returned any data. Without knowing the return data structure my best guess would be

$("#example").load("list #example", function (data) {
    // hopefully you are returning json. if not, return json. It's the artisan way :D
    let parsed = JSON.parse(data);

    if (parsed) {
        // build html and inject in dom
    }
});