let htmlProducts= document.getElementById('xnxx')

        url_list_product = "http://localhost:5000/api/product/view-all"


        fetch(url_list_product)
            .then(function(respone) {
                return respone.json();
            })
            .then(function(products) {
                console.log("ok");
                console.log(JSON.parse(products));
                
                var htmls =   
            //     products.forEach(element => {                
            //         var htmls =  `
            //         <div class="col-3 card-item">
            //             <div class="card">
            //                 <img src="./img/product1.png" class="card-img-top" alt="">
            //                 <div class="card-body">
            //                     <h5 class="card-title">${element.name}</h5>
            //                     <p class="card-text">${element.description}Một chuyến phiêu lưu mới đầy bất ngờ và hấp dẫn, cùng 12 cùng
            //                                     hoàng đạo lớp học mật ngữ</p>
            //                     <p class="card-price">${element.price}</p>
            //                 </div>
            //             <div class="card__overlay">
            //                 <a href="#" class="card__overlay-detail">
            //                     <i class="fa fa-arrow-circle-right"></i>Xem chi tiết
            //                 </a>
            //                 <button class="card__overlay-cart">
            //                     <i class="fa fa-shopping-cart"></i>Cho vào giỏ
            //                 </button>
            //                 </div>
            //             </div>
            //         </div>`;
            //         t += htmls;
            //     });
            // })
        

                products.map(function(data) {
                    console.log("h----")
                    console.log(data.name);
                return `
                    <div class="col-3 card-item">
                        <div class="card">
                            <img src="./img/product1.png" class="card-img-top" alt="">
                            <div class="card-body">
                                <h5 class="card-title">${data.name}</h5>
                                <p class="card-text">${data.description}Một chuyến phiêu lưu mới đầy bất ngờ và hấp dẫn, cùng 12 cùng
                                                hoàng đạo lớp học mật ngữ</p>
                                <p class="card-price">${data.price}</p>
                            </div>
                        <div class="card__overlay">
                            <a href="#" class="card__overlay-detail">
                                <i class="fa fa-arrow-circle-right"></i>Xem chi tiết
                            </a>
                            <button class="card__overlay-cart">
                                <i class="fa fa-shopping-cart"></i>Cho vào giỏ
                            </button>
                            </div>
                        </div>
                    </div>`;
                });
                var listProducts = document.getElementById('xnxx');
                listProducts.innerHTML = htmls.join('');

            })
            .catch(function(err){
                console.log(err);
            })