Как заполнить данные jquery соответственно / индивидуально для карт?

Question

Я новичок в фреймворке Laravel, и я пытаюсь разработать простой список автомобилей, используя карты Bootstrap. Я успешно реализовал AJAX Get, включая заполнение данных из Controller с помощью метода Jquery append (). Однако он отображает все автомобили в одном Card. Как заполнить каждую Карту, содержащую каждую машину? текущий результат console.log результат

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

Это ты о чем?

Я создал пример, в котором я использую несколько строк из ваших данных console.log.

Объяснение: Я выполняю итерацию по массиву данных. Если это первая итерация, я добавляю данные (в вашем коде существует один CarDetail div.

Для следующих итераций я клонирую CarDetail div и заполняю его следующими данными.

Конечно, есть больше возможностей, как добавить свои данные на страницу. Например, вы можете заполнить первый элемент на странице, а затем выполнить итерацию от второго до последнего (в этом случае вам не понадобится условие if / else) или вы можете добавить код HTML в переменную JS. Лично я бы не стал этого делать, потому что он выглядит очень уродливо и читаемость кода может ухудшиться.

$(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>

Редактировать: Я отредактировал свой код для клонирования <div class="card mb-3 shadow-sm" для каждой карты и добавил туда данные. Более того, я добавляю класс card-container в родительский элемент, чтобы использовать его при добавлении новой машины. Этого достаточно?