jquery .html（）メソッドエラー[オブジェクトオブジェクト]

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ボタン検索を使用して、それがこのエラーを投げますしかし、適切に返されたデータは次のように要素を調べる：あなたはjQueryオブジェクトを返しますjQueryの$(something)を使用して要素を作成しようとして再

ここ

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

Answer 1

、 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

問題は、あなたがオブジェクトを作成し、文字列のようにそれを処理しているということです。代わりに、オブジェクトをコンテナに直接追加してください（"#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); 
}