CODEWITHSUNDEEP
arraysjsonangular
Leyli Abbasova
Leyli Abbasova

Reputation: 389

How can I print json array in Angular 4?

This is how json looks like:

--------------------------------------------------
    "id": 2,
        "user": {
            "id": 1,
            "name": "User",
            "surname": "User",
            "email": "[email protected]"
        },
        "host": {
            "id": 1,
            "name": "Azza"
        },
        "products": [
            {
                "id": 3,
                "name": "Desert Tiramisu",
                "price": "2.40",
                "media_ids": "3,4",
                "quantity": 1
            }
        ],
-------------------------------------------------

HTML part:

  <div *ngFor="let item of active_orders">
    <div class="row">
      <div class="col-md-12">
        <div class="col-md-4">
          <h4>
            {{item.products.name}}
          </h4>
        </div>
      </div>
    </div>
  </div>

I want to print products'name (for example in our case "Desert Tiramisu"). But I don't get any results. Where are my mistakes?

Upvotes: 0

Views: 918

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222582

You need to have nested ngFor since products is an array

  <div *ngFor="let item of active_orders">
    <div class="row">
      <div class="col-md-12">
        <div class="col-md-4"  *ngFor="let detail of item.products">
          <h4>
            {{detail.name}}
          </h4>
        </div>
      </div>
    </div>
  </div>

Upvotes: 4

Related Questions