Блог

Если бы я использовал данные, зафиксированные в HTML-файле, он показал бы 4 столбца/ поля подряд. Если бы я использовал данные, полученные из API, используя метод XMLHttpRequest, он показал бы 4 столбца. это может быть проблема css или проблема js, но я, похоже, не могу найти ее решение, и я надеялся, что кто-нибудь сможет решить эту проблему. Заранее спасибо!

HTML

 <section class="product" id="product">
    <h1 class="heading">latest <span>products</span></h1>
    <div class="box-container">
        <div id="fourfoodproducts"></div>
    </div>
</section>
 

CSS

 .product .box-container .box{
  flex:1 1 30rem;
  text-align: center;
  padding:2rem;
  border:.1rem solid rgba(0,0,0,.3);
  border-radius: .5rem;
  overflow: hidden;
  position: relative;
}
 

JS

 function GetTopsixFoods() {
    var baseurl = "https://something.herokuapp.com/products";
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", baseurl, true);
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState === 4 amp;amp; xmlhttp.status === 200) {
            var product = JSON.parse(xmlhttp.responseText);

            //main table content we fill from data from the rest call
            var main = "";
            for (i = 0; i < 4; i  ) {
                main  = ` 
            

                <div class="box">
                <span class="discount">${product[i].Discount}</span>
                <div class="icons">
                    <a href="#" class="fas fa-heart"></a>
                    <a href="#" class="fas fa-share"></a>
                    <a href="#" class="fas fa-eye"></a>
                </div>
                <img src="${product[i].Image}" alt="">
                <h3>natural butter</h3>
                <div class="stars">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star-half-alt"></i>
                </div>
                <div class="price"> $10.50 <span> $13.20 </span> </div>
                <div class="quantity">
                    <span>quantity : </span>
                    <input type="number" min="1" max="1000" value="1">
                    <span> /kg </span>
                </div>
                <a href="#" class="btn">add to cart</a>
            </div>
                
                `
            }
            var tbl = main;
            document.getElementById("fourfoodproducts").innerHTML = tbl;
        }
    };
    xmlhttp.send();
}
 

Большое спасибо, что прочитали все это!