Плохая практика в ajax-запросе с добавлением html в шаблон django

Question

На моей странице отображаются все объекты БД с тегами шаблонов, которые я зацикливаю для набора запросов, чтобы каждый объект отображался на карточке.

Я хочу отфильтровать эти объекты по категории (чтоявляется параметром) без обновления страницы, поэтому я сделал запрос ajax, который получает JSON с отфильтрованными объектами и отображает их.

Функция ajax работает нормально, но включает в себя некоторые плохие практики, как вы можете видеть из кода ниже.

# my view
class HomeView(ListView):
    model = Item
    paginate_by = 4
    template_name = "home-page.html"

//relevant part of my template
<div class="row wow fadeIn" id="hardwarelist">
{% for item in object_list %}
          <div class="col-lg-3 col-md-6 mb-4">
            <div class="card">
              <div class="view overlay">
                  <img src="{{item.image}}" class="card-img-top" alt="" 
                   height="330" width="330">
                <a href="{{ item.get_absolute_url }}">
                  <div class="mask rgba-white-slight"></div>
                </a>
              </div>
              <div class="card-body text-center">
                <a href="" class="grey-text">
                  <h5>{{ item.get_category_display }}</h5>
                </a>
                <h5>
                  <strong>
                    <a href="{{ item.get_absolute_url }}" class="dark-grey- 
                     text">{{item.title}}<br/>
                      <span class="badge badge-pill
                      {{ item.get_label_display }}-color">
                      {{item.label}} 
                      </span>
                    </a>
                  </strong>
                </h5>

// ajax function
// bad pratice here, I append the card html tag by tag changing template tags
// like {{item.title}} with js variables like objects.title,
// basically I append all the html diplayed above and it's clearly bad pratice
function ajax() {
    $.ajax({
        type: 'GET',
        url: 'http://127.0.0.1:8000/ecommerce/list-api/' + urlJson + '?format=json',
        success: function(objects) {
            $.each(objects, function(i, object){
                            $hardwarelist.append(<div> + object.title + 
                                                 </div>)
// here I go on appending every html line
            });
        },
        error: function() {
                alert('errore caricamento Oggetti');
                }
        });

}
})

Как я могу сделать это без использования .append?

Я попытался переместить Html своей карты в другой файл и включить его в "home"-page.html "но я не могу обрабатывать объекты.

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