Показать ответ ajax jquery внутри таблицы

Question

Мне нужно показать данные ответа на вызов ajax внутри HTML-таблицы.Сейчас он показывает только первый массив данных, а другие не отображаются.

Я использовал append, но у меня это не сработало. Есть ли другой способ вызвать все остальные массивы.

функция ajax

jQuery.ajax({
    url: "{{ url('/searchq/') }}",
    method: 'get',
    data: {
        clientemail: jQuery('#cemail').val(),
        clientname: jQuery('#cname').val(),
        productname: jQuery('#pname').val(),
        start: jQuery('#startdate').val(),
        end: jQuery('#enddate').val(),
    },
    success: function(result) {
        console.log(result);
        $('#content').html(
            "<td>" + result[0].id + "</td>" +
            "<td>" + result[0].name + "</td>" +
            "<td>" + result[0].product_name + "</td>" +
            "<td>" + result[0].created_at + "</td>"
        );
    }
});

консоль

Я тоже пробовал, но потомэто ничего не показывает.

             success: function (result) {
                        console.log(result);
                        $("#content").remove();

                        if (result== "err") {
                            alert("Something Happened Wrong! Please Try Again.");
                        } else {
                            var trHTML = '';
                            $.each(result.ReportArr, function (i, obj) {
                                trHTML += '<tr><td>' + obj.id + '</td><td>' + obj.name + '</td><td>' + obj.product_name + '</td><td>' +  obj.created_at + '</td></tr>';
                            });
                            $('#content').append(trHTML);
                        }
                    }

Answer 1

Используйте метод $ .each и затем добавьте его к телу таблицы, если у вас есть тело.

jQuery.ajax({
    url: "{{ url('/searchq/') }}",
    method: 'get',
    data: {
        clientemail: jQuery('#cemail').val(),
        clientname: jQuery('#cname').val(),
        productname: jQuery('#pname').val(),
        start: jQuery('#startdate').val(),
        end: jQuery('#enddate').val(),
    },
    success: function(result) {
        console.log(result);

        $.each(result, function(index, item) {
            var el = `
                <tr>
                  <td>${item.id}</td>
                  <td>${item.name}</td>
                  <td>${item.product_name}</td>
                  <td>${item.created_at}</td>
                </tr>
            `;

             $('#content > tbody').append(el);
        });
    }
});

Answer 2

Оба ответа выше используют ненужное количество запросов DOM.Попытайтесь изменить одно из этих решений, чтобы использовать ссылку в памяти на вашу таблицу, чтобы предотвратить чрезмерные запросы DOM.

Я предполагаю, что у вас есть хранилище таблицы, которую вы заполняете, используя такой оператор, как:

     var myTableBody = $('#my-table-id tbody');

Переходя от этого, вы обязательно должны использовать цикл для просмотра массива результатов.Я бы сказал, что jQuery $ .each слишком многословен и в этом случае не нужен, поскольку возвращаемый объект должен быть чистым массивом JS.

    success: function (result) {
       result.forEach(function(resultRow){
          var tableRow = `<tr>
                            <td>
                              ${resultRow.id}
                            </td>
                            <td>
                              ${resultRow.name}
                            </td>
                            <td>
                              ${resultRow.product_name}
                            </td>
                            <td>
                              ${resultRow.created_at}
                            </td>
                           </tr>`;

           myTableBody
             .append(tableRow);
       });
    }

Наиболее важная часть этого решения, по сравнению с остальнымиВо-вторых, отсутствие постоянных запросов DOM.Для результирующего набора из 100 элементов мое решение все еще только запрашивает DOM для элемента таблицы 1 раз.Другие решения запрашивают в DOM элемент таблицы для количества элементов в списке результатов.

По предложению Фила в комментариях я также добавляю реализацию карты.

    success: function (result) {
      let tableRows = result.map((resultRow) =>
           `<tr>
              <td>
                ${resultRow.id}
              </td>
              <td>
                ${resultRow.name}
              </td>
              <td>
                ${resultRow.product_name}
              </td>
              <td>
                ${resultRow.created_at}
              </td>
            </tr>`;
       );
       myTableBody.append(tableRows);
    }

Answer 3

Вы можете использовать метод $ .each ()

...
success: function(result) {
    console.log(result);
    $.each(result,function(index,item){ 
        $('#yourTable').append(
            "<tr>" +
            "<td>" + item.id + "</td>" +
            "<td>" + item.name + "</td>" +
            "<td>" + item.product_name + "</td>" +
            "<td>" + item.created_at + "</td>" +
            "</tr>" 
        );
    });
} 
...

yourTable может быть идентификатором вашей таблицы.В приведенном выше примере эта таблица отображает новую строку для каждого индекса ваших результатов.

Надеюсь, это поможет.