jquery .html() метод error [object Object]

Question

Я использую jquery ajax для создания элемента.

вот код до сих пор:

$('button[type="search"]').click(function(e) { 
$.ajax({ 
    url: "{{ route('fine.search') }}", 
    type: "POST", 
    data: { 
     '_token' : '{{csrf_token() }}', 
     'driver_id' : $('select[name="driver_id"]').val(), 
     'fine_date' : $('input[name="fine_date"]').val(), 
    }, 
    success: function(data) { 
     if(data.status == true) { 

     var result= ''; 

     $.each(data.getCarbyDriver, function(i, data) { 
     result += $('<input/>', {"class": 'col-xs-3 col-sm-3 col-md-3',}).attr({ type: 'radio', name: 'car_id'}).val(data.car_id); 
     result += $('<div>' + data.plate_no + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',}); 
     result += $('<div>' + data.start_time + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',}); 
     result += $('<div>' + data.end_time + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',}); 
     }); 
     $('#search-result').html(result); 
     } 
    }, 
    error: function(data) { 
     if(data.getCarbyDriver == null) { // if the result is null 
      $('#noData').show(); 
      $(".row-bot, #search-result").hide(); // show the div.. 
     } 
    } 
}); 
}); 

каждый раз им работает Ajax с помощью поиска кнопки, то бросить эту ошибку: [объект Object] [объект Object] [объект Object] [объект Object]

но возвращаемые данные должным образом на инспектировать элемент, как это:

{start_time: "2016-11-12 08:00:00", end_time: "2016-11-12 18:00:00", car_id: 1, plate_no: "IT69164NO",…} 

Answer 1

Здесь вы пытаетесь создать элементы, используя JQuery $(something) возвращает объект JQuery, которые вы пытаетесь добавить к result. Это приведет к получению строки [object Object].

Решения раздвинуть вновь созданные элементы в массив results и использовать $('#search-result').append(result);

Используйте $('#search-result').empty().append(result);, если вы хотите, чтобы очистить существующие элементы и добавлять новые. Это поможет избежать дубликатов.

Вот модифицированный обработчик успеха:

var result= []; 

    $.each(data.getCarbyDriver, function(i, data) { 
     result.push(
      $('<input/>', {"class": 'col-xs-3 col-sm-3 col-md-3',}).attr({ type: 'radio', name: 'car_id'}).val(data.car_id), 
      $('<div>' + data.plate_no + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',}), 
      $('<div>' + data.start_time + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',}), 
      $('<div>' + data.end_time + '</div>', {"class": 'col-xs-3 col-sm-3 col-md-3',}) 
     ); 
    }); 

    $('#search-result').empty().append(result); 

Answer 2

Проблема заключается в том, что вы создаете объект и обрабатывать его как String. Вместо этого добавьте объект прямо в контейнер ("#search-result"). Вы можете попробовать что-то вроде этого:

$.each(data.getCarbyDriver, function(i, data) { 
    var searchResult = $('#search-result'); 
    $('<input/>', { 
      "class": 'col-xs-3 col-sm-3 col-md-3', 
      radio: 'car_id', 
      value: data.car_id 
     }).appendTo(searchResult); 
    $('<div/>', { 
      "class": 'col-xs-3 col-sm-3 col-md-3', 
      text: data.plate_no 
     }).appendTo(searchResult); 
    $('<div/>', { 
      "class": 'col-xs-3 col-sm-3 col-md-3', 
      text: data.start_time 
     }).appendTo(searchResult); 
    $('<div/>', { 
      "class": 'col-xs-3 col-sm-3 col-md-3', 
      text: data.end_time 
     }).appendTo(searchResult); 
}