Search code examples
cssjsonangulare-commerce

Products Pulled in from JSON not displaying in a grid

I am pulling in content from a JSON file to populate a grid of products for an eCommerce website I'm working on. when the data loads it displays all the products in 1 column or (1 row) instead of in a grid. All the CSS for this part of from default Bootstrap 4 values. I need your assistance to go about this.

Thanks

Here is the code to display them on a page I called "products"

<div class="product container d-flex justify-content-center mt-50 mb-50"> 
            <div class="card">
                <div class="card-body">
                <div class="card-img-actions"> <img src="{{product.imageUrl}}" class="card-img img-fluid" width="96" height="350" alt=""> </div>
                </div>
                <div class="card-body bg-light text-center">
                    <div class="mb-2">
                        <h6 class="font-weight-semibold mb-2"> <a routerLink="/products/{{product.id}}" class="text-default mb-2" data-abc="true">{{product.title}}</a> </h6> 
                            </div>
                    <h3 class="mb-0 font-weight-semibold">{{product.price}}</h3>
                    Available in size: {{product.size}} 
                    <button type="button" class="btn bg-cart"> Buy Now </button>
                </div>
            </div>
    </div>

Then below is what I have on the products.components.html

<app-header></app-header>
<app-item *ngFor="let product of products" [product]= "product"></app-item> 
<app-footer></app-footer>

This is the expected result I want to acheive

Here is what I am getting

enter image description here

Solution

  • I think you did not follow the bootstrap principles of how to construct a card grid.

    When you put your .container class into the app-item, you will create a new container on each loop, which you don't want I guess. Instead you only want one container and then the cards as columns.

    See https://getbootstrap.com/docs/5.1/components/card/#grid-cards

    <app-header></app-header>
<div class="container">
   <div class="row row-cols-md-3">
      <ng-container *ngFor="let product of products">
         <app-item [product]="product"></app-item> 
      </ng-container>
   </div>
</div>
<app-footer></app-footer>

    And in your app-item you only have columns.

    <div class="product col"> 
   <div class="card">
 ...
   </div>
</div>