Не выводятся элементы массива JS

нужно перебрать объект и вывести все данные товара в блок #product__yesfilter. Сейчас почему то выводится только первый элемент массива

Хотя я и собираю все элементы в массив и вне цикла пытаюсь вывести

<script>

$.ajax({
                url: '/filter.php',
                method: 'post',
                dataType: 'html',
                data: {'ves[]':ves_data, 'material[]':material_data, 'cat_id':cat_id},
                success: function(response){
                //console.log(response);
                let res = JSON.parse(response); //Преобразовал в обьект
                // let json = JSON.stringify(res); //Опять в строку
                // alert(json);
                //Тут нужно форичем перебрать что бы сформировать верстку
                for (var key in res) {
                var name = res[key]['name'];
                var price = res[key]['price'];
                var image = res[key]['image'];
                var product = `<div class="product-layout product-grid product-style-1 col-lg-4 col-md-4 col-sm-4 col-xs-4 product-items">
                               <div class="product-thumb">
                                    <div class="product-item">  
                                        <div class="image swatches-image-container">
                                        <a href="product_id=93010478">
                                            <img src="/image/cache/${image}" class="img-responsive img-cate-93010478">
                                            </a>
                                                    <div class="button-group">
                                                        <button type="button" class="button-wishlist" title="В закладки" onclick="wishlist.add('93010478');"><span>В закладки</span></button>
                                                        <button type="button" class="button-compare" title="В сравнение" onclick="compare.add('93010478');"><span>В сравнение</span></button>
                                                        <button class="button-quickview" type="button" title="Быстрый просмотр" onclick="ptquickview.ajaxView(product_id=93010478')"><span>Быстрый просмотр</span></button>
                                                                                                            </div>
                                                    <div class="box-cart">
                                                    <button type="button" class="button-cart" title="Купить" onclick="cart.add('93010478', '1');"><span>Купить</span></button>
                                                    </div>
                                                                                            </div>
                                                <div class="caption">
                                                <h4><a href="product_id=93010478">${name}</a></h4>
                                                <p class="price">${price}</p>
                                            </div>
                                    </div>
                                </div>
                            </div>`;
                var product_filter_arr = [];
                var products = product_filter_arr.push(product);
                
                }
                
                $("#product__yesfilter").html(product_filter_arr);
                },
                error: function(response) { // Данные не отправлены
                    alert('Ошибка. Данные не отправлены.');
                }
            });
        });
        </script>

Подскажите пожалуйста, что делаю не так, заранее спасибо!

var product_filter_arr = [];
for (var key in res) {
  ...
  //var product_filter_arr = [];
  ...
}
$("#product__yesfilter").html(product_filter_arr.join());