Ajax Data Display извлекается из базы данных

Question

У меня есть данные из базы данных.И отображение, когда вызывается функция ajax.Я могу показать это.Но, одна из переменных - это данные массива, которые были сохранены с помощью функции implode.Данные как (а, б, в, г).

Данные отображаются в следующем формате:

data1 Данные2 Данные3 (a, b, c, d) Данные5 и т. Д.

Я хочу разбить данные массива и напечатать одно под другим.

Я должен отобразить это как

data1 data2 data3  a  data5
                   b
                   c
                   d 

Вот код, который я написал, чтобы получить данные.

<script type="text/javascript">
                    $('#genreport').on('click',function(){
                    var Representativeid = document.getElementById("Representativeid").value;
                    var dateFrom = document.getElementById("dateFrom").value;
                    var dateTo = document.getElementById("dateTo").value;
                    var url = '{{URL::to('/admin/GenReport')}}';
                    $.ajax({
                      type : 'get',
                      url  : url,
                      data : {Representativeid:Representativeid,dateFrom:dateFrom,dateTo:dateTo},
                      success:function(data){
                        console.log(data);
                        var $tabledata = $('#tbody');
                        $tabledata.empty();
                        for (element in data)
                        {

                          var row = '<tr>' +
                             '<td>' + data[element].date + '</td>'+
                             '<td>' + data[element].doctor_name + '</td>'+
                             '<td>' @foreach(explode(',', data[element].products ) as $product) 
                                {{$product}}    
                             @endforeach '</td>' +
                              '<td>' + data[element].quantity + '</td>'+
                             '<td>' + data[element].locations +'</td>'+
                             '<td>' + data[element].area + '</td>'+
                             '</tr>';
                           $('#tbody').append(row);
                        }
                      },
                      error:function(data)
                      {
                        alert('fail');
                        alert(data);
                      }
                    });
                  });
                </script>

Я ошибаюсь в логике для каждого.Пожалуйста, помогите мне отобразить, как я ожидал.

Answer 1

Вы не можете использовать функцию / код php (на стороне сервера) в своем коде javascript / jQuery (на стороне клиента), так как код php будет проанализирован до загрузки страницы.Вместо этого вам нужно использовать код javascript.

Сначала вам нужно разделить значение на массив

var productsArray = data[element].products.split(',');

, затем вам нужно получить количество массивов (.length), чтобы использоватьrowspan, так что это не нарушает структуру вашей таблицы

var rowSpan = productsArray.length;
....
'<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
....

наконец, вам нужно выполнить цикл в массиве через javascript, а не php.(обратите внимание, что i<0 <td> s идут в последующих строках, вам нужно добавить их после )

var rowAfter = "";
for (var i = 0; i < rowSpan; i++) {
  if(i == 0) {
    row += '<td>' + productsArray[i] + '</td>';
  } else {
    rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
  }
}

, чтобы это выглядело примерно так -

                    for (element in data)
                    {
                      // get products into an array
                      var productsArray = data[element].products.split(',');
                      // get products array count
                      var rowSpan = productsArray.length;

                      var row = '<tr>' +
                         '<td rowspan="'+rowSpan+'">' + data[element].date + '</td>'+
                         '<td rowspan="'+rowSpan+'">' + data[element].doctor_name + '</td>';

                      // loop through products array
                      var rowAfter = "";
                      for (var i = 0; i < rowSpan; i++) {
                        if(i == 0) {
                          row += '<td>' + productsArray[i] + '</td>';
                        } else {
                          rowAfter += '<tr><td>' + productsArray[i] + '</td></tr>';
                        }
                      }

                      row += 
                         '<td rowspan="'+rowSpan+'">' + data[element].quantity + '</td>'+
                         '<td rowspan="'+rowSpan+'">' + data[element].locations +'</td>'+
                         '<td rowspan="'+rowSpan+'">' + data[element].area + '</td>'+
                         '</tr>';
                       // append both row and the <td>s in rowAfter
                       $('#tbody').append(row+rowAfter);
                    }

Answer 2

просто добавьте <tr><td> внутрь foreach.

Edit: Также посмотрите на эту ссылку. столик внутри тд