How to populate jquery data accordingly/individually to Cards? - php

Question

Im new to Laravel framework and im trying to develop a simple car listing web using Bootstrap Cards. I've successfully implemented AJAX Get including populating data from Controller using Jquery append() method. However it is displaying all cars in one Card. How to populate each Cards containing each car?. current result console.log result
public function GetCars(Request $request)
{
if ($request->ajax())
{
$cars = Car::all();
return response()->json( $cars );
}
}
<div class="album py-1">
<div class="container bg-light">
<div class="row py-2">
<div class="col-md-3">
<div class="card mb-3 shadow-sm">
<div class="hover-container">
<img src="" class="image img-thumbnail">
<a class="Viewbtn text-decoration-none" href="#" style="font-size: small">View</a>
</div>
<div class="card-body CarDetail">
<p class="card-text font-weight-bold">Make:<span class="car_Make"></span></p>
<p class="card-text font-weight-bold">Model:<span class="car_Model"></span></p>
<div class="d-flex justify-content-between align-items-center">
<p class="font-italic table_data">Price: RM <span class="car_Year"></span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="testbtn" type="submit" class="btn btn-success">AJAX</button>
</div>
<script>
$(document).ready(function(){
$('#testbtn').click(function () {
$.ajax({
type: 'GET',
url: '/ajax/getCar',
success : function (data) {
$.each(data, function( i, car ) {
$('.car_Make').append(car.make);
$('.car_Model').append(car.model+'<br>');
$('.car_Year').append(car.year+'<br>');
});
}
});
});
});
</script>

Answer 1

This is what are you meaning?
I created an example, where I'm using some rows from your console.log data.
Explanation:
I am iterating throught the data array. If it is first iteration I'm adding data (one CarDetail div exists in your code.
For the next iterations I am cloning the CarDetail div and fill with next data.
Of course,there are more posibilities how to add your data to page. For example, you can fill the first item in page and then iterate from the second to the last (in that case you won't need the if/else condition) or you can add the HTML code in a JS variable. Personally, I wouldn't do that because it looks very ugly and the readability of the code could get worse.
$(document).ready(function(){
var data = [
{id:31,make:"Audi",model:"R8",year:2000},
{id:32,make:"Ferrari",model:"FF",year:2000},
{id:33,make:"Mazda",model:"Rx-7",year:2000},
{id:34,make:"Ferrari",model:"F12",year:2012},
{id:35,make:"Porsche",model:"911",year:2015},
{id:36,make:"Land Rover",model:"Vogue",year:2015},
{id:37,make:"Mercedes Benz",model:"SL350",year:2013},
{id:38,make:"Ferrari",model:"F12",year:2013},
{id:39,make:"Ferrari",model:"458",year:2013},
];
$.each(data, function( i, car ) {
if(i == 0) {
$('.card').find('.car_Make').text(car.make);
$('.card').find('.car_Model').text(car.model);
$('.card').find('.car_Year').text(car.year);
} else {
var carDetailCloned = $('.card').first().clone();
carDetailCloned.find('.car_Make').text(car.make);
carDetailCloned.find('.car_Model').text(car.model);
carDetailCloned.find('.car_Year').text(car.year);
$('.card-container').append(carDetailCloned);
}
});
});
.CarDetail{background-color:red;margin-bottom:2em}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="album py-1">
<div class="container bg-light">
<div class="row py-2">
<div class="col-md-3 card-container">
<div class="card mb-3 shadow-sm">
<div class="hover-container">
<img src="" class="image img-thumbnail">
<a class="Viewbtn text-decoration-none" href="#" style="font-size: small">View
</a>
</div>
<div class="card-body CarDetail">
<p class="card-text font-weight-bold">Make:
<span class="car_Make"></span>
</p>
<p class="card-text font-weight-bold">Model:
<span class="car_Model"></span>
</p>
<div class="d-flex justify-content-between align-items-center">
<p class="font-italic table_data">Price: RM
<span class="car_Year"></span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button id="testbtn" type="submit" class="btn btn-success">AJAX</button>
</div>
Edit: I edited my code to clone <div class="card mb-3 shadow-sm" for every card and add data in there. Moreover, I add a card-container class in the parent element to use it when I append a new car. Is that enough?