Отобразить laravel результат повторного запуска в html таблице, используя jquery - Ajax

Question

В Laravel Blade У меня есть скрипт для поиска

 <script type="text/javascript">
    $.ajax({
        type: "POST",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
          },
        url: "{{ URL::asset('upload-panel/search')}}",
        data: dataString,
        dataType:"JSON",
        cache: false,
        success: function(result) { 
        var FinalResult=result.CallDetails
        num_rows = result.length;
        console.log(result)


        },error:function(x,e) {
            setTimeout(function() {searchPhoneCalls();}, 2000);
        }
    })
</script>

Функция поиска в возвратах контроллера ниже

return json_encode ($ users);

В консоли я получаю результат в виде массива, как показано ниже

0: {Short_name: "GO120762", Date: "21-01-2020"}
1: {Short_name: "GO120764", Date: "21-01-2020"}
2: {Short_name: "GO120766", Date: "21-01-2020"}

Я хочу отобразить эти результаты в таблице HTML, как показано ниже

+----------+------------+
| Name     | Date       |
+----------+------------+
| GO120762 | 21-01-2020 |
+----------+------------+
| GO120764 | 21-01-2020 |
+----------+------------+
| GO120766 | 21-01-2020 |
+----------+------------+

Answer 1

Это не имеет ничего общего с Laravel, это чисто HTML / jQuery "проблема".

Нет такого ключа с именем CallDetails в полученном JSON

Вы можете создать массив в своем HTML:

<table id="table-search"></table>

И в своем JS:

var $tableSearch = $('#table-search');
$tableSearch.html('');
//var FinalResult = result.CallDetails
result.forEach(function(row) {
    $tableSearch.append('<tr><td>'+ row.Short_name +'</td><td>'+ row.Date +'</td></tr>');
});

Answer 2

Попробуйте вот так

success: function(result) {
 var tableSearch = $('#table-search');
 tableSearch.html('');

 $.each(result, function(index, value){
    tableSearch.append('<tr><td>'+value.Short_name+'</td><td>'+value.Date+'</td></tr>');
});
}

Answer 3

В вашем клинке:

<table>
    <thead>
        <th>Name</th>
        <th>Date</th>
    </thead>
    <tbody class="tbody">

    </tbody>
</table>

IN ajax скрипт:

success: function(result) { 
    var FinalResult=result.CallDetails
    num_rows = result.length;
    console.log(result)

    $.each(FinalResult, function(index, value){
        $('tbody').append('<tr><td>'+value.Short_name+'</td><td>'+value.Date+'</td></tr>');
    });

 }