How can I print json array in Angular 4?

Question

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?

Try {{item.products[0].name}}.

Avnesh Shakya
– Avnesh Shakya

2017-07-18 14:49:49 +00:00
Commented Jul 18, 2017 at 14:49 — Avnesh Shakya
– Avnesh Shakya, Commented Jul 18, 2017 at 14:49

Sajeetharan · Accepted Answer · 2017-07-18 14:49:01Z

4

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>

answered Jul 18, 2017 at 14:49

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sajeetharan Over a year ago

check above as mentioned

Collectives™ on Stack Overflow

How can I print json array in Angular 4?

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related