Angular display Object in array via *ngFor

Question

I have the following set of data coming from a JSON file which I am trying to display via "*ngFor" in my template. I can display most of it except the "people" Objects. There can be any amount of "people" Objects. This example data set only has 2 in it.

  [{
  "caseNumber": "01/01/2020",
  "caseData": {
    "caseType": "Criminal",
    "caseCompName": "",
    "caseCompNumber": "12121212",
    "caseDate": "01/02/2019",
    "caseTime": "12:00",
    "caseStatus": "Open"
  },
  "people": [{
    "name": "Paul",
    "lastName": "Von Zeuner",
    "middleName": "Waldemar",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  },{
    "name": "John",
    "lastName": "Doe",
    "middleName": "Steve",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  }]
 }]

I attempted something like this but it only displays the first person. Im not sure if the Array itself is incorrectly structured or if the *ngFor is the problem

    <div *ngFor='let item of caseData; let i=index'>
        <div class="row">
          <div class="col-sm">
            Name: {{item.people[i].name}}
          </div>
          <div class="col-sm">
            Last Name: {{item.people[i].lastName}}
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            Middel Name: {{item.people[i].middleName}}
          </div>
          <div class="col-sm">
            Country of Birth: {{item.people[i].countryBirth}}
          </div>
        </div>
    </div>

Please assist me

i is the index of the loop iterating over the items of your outer array. You need an inner loop iterating over each item's people array. — JB Nizet
– JB Nizet, Commented Jul 17, 2018 at 6:10

Anuradha Gunasekara · Accepted Answer · 2018-07-17 06:14:46Z

I've created a working sample on stackblitz take a look.

In the component.ts

 data =[{
  "caseNumber": "01/01/2020",
  "caseData": {
    "caseType": "Criminal",
    "caseCompName": "",
    "caseCompNumber": "12121212",
    "caseDate": "01/02/2019",
    "caseTime": "12:00",
    "caseStatus": "Open"
  },
  "people": [{
    "name": "Paul",
    "lastName": "Von Zeuner",
    "middleName": "Waldemar",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  },{
    "name": "John",
    "lastName": "Doe",
    "middleName": "Steve",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  }]
 }];

In the component.html

<div *ngFor='let item of data; let i=index'>
    <div *ngFor="let person of item.people">
        <div class="row">
            <div class="col-sm">
                Name: {{person.name}}
            </div>
            <div class="col-sm">
                Last Name: {{person.lastName}}
            </div>
        </div>
        <div class="row">
            <div class="col-sm">
                Middel Name: {{person.middleName}}
            </div>
            <div class="col-sm">
                Country of Birth: {{person.countryBirth}}
            </div>
            <br>
        </div>
    </div>
</div>

Arash · Accepted Answer · 2018-07-17 06:12:16Z

1

You should use 2 ngFor in you'r html.

try this code :

<div *ngFor='let item of caseData; let i=index'>
    <div *ngFor="let person of item.people" class="row">
        <div class="col-sm">
            Name: {{person.name}}
        </div>
        <div class="col-sm">
            Last Name: {{person.lastName}}
        </div>
        <div class="col-sm">
            Middel Name: {{person.middleName}}
        </div>
        <div class="col-sm">
            Country of Birth: {{person.countryBirth}}
        </div>
    </div>
</div>

Stackblitz Demo

answered Jul 17, 2018 at 6:12

Arash

1,8455 gold badges24 silver badges37 bronze badges

Comments

Sumit Patel · Accepted Answer · 2018-07-17 06:10:22Z

1

try this

<div *ngFor='let item of people; let i=index'>
    <div class="row">
      <div class="col-sm">
        Name: {{item.name}}
      </div>
      <div class="col-sm">
        Last Name: {{item.lastName}}
      </div>
    </div>
    <div class="row">
      <div class="col-sm">
        Middel Name: {{item.middleName}}
      </div>
      <div class="col-sm">
        Country of Birth: {{item.countryBirth}}
      </div>
    </div>
</div>

answered Jul 17, 2018 at 6:10

Sumit Patel

824 bronze badges

Comments

Ali Rida · Accepted Answer · 2018-07-17 06:44:53Z

The JSON array contains only 1 object with 3 attributes: caseNumber, caseData and people which is an array of objects.

You're using ngFor to loop through caseData when what you need to do is loop throught the whole data array and then loop through the people array like below:

ComponentName.ts:

dataArray =
  [{
  "caseNumber": "01/01/2020",
  "caseData": {
    "caseType": "Criminal",
    "caseCompName": "",
    "caseCompNumber": "12121212",
    "caseDate": "01/02/2019",
    "caseTime": "12:00",
    "caseStatus": "Open"
  },
  "people": [{
    "name": "Paul",
    "lastName": "Von Zeuner",
    "middleName": "Waldemar",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  },{
    "name": "John",
    "lastName": "Doe",
    "middleName": "Steve",
    "dob": "1981-09-29",
    "countryBirth": "South Africa"
  }]
 }]

ComponentName.html

<div *ngFor='let item of dataArray; let i=index'>
    <div *ngFor='let person of item.people'>
        <div class="row">
          <div class="col-sm">
            Name: {{person.name}}
          </div>
          <div class="col-sm">
            Last Name: {{person.lastName}}
          </div>
        </div>
        <div class="row">
          <div class="col-sm">
            Middel Name: {{person.middleName}}
          </div>
          <div class="col-sm">
            Country of Birth: {{person.countryBirth}}
          </div>
        </div>
    </div>
</div>

gotnull · Accepted Answer · 2018-07-17 06:12:32Z

0

<div *ngFor='let item of caseData'>
  <div *ngFor='let person of item.people'>
    <div class="row">
      <div class="col-sm">
        Name: {{person.name}}
      </div>
      <div class="col-sm">
        Last Name: {{person.lastName}}
      </div>
    </div>
    <div class="row">
      <div class="col-sm">
        Middel Name: {{person.middleName}}
      </div>
      <div class="col-sm">
        Country of Birth: {{person.countryBirth}}
      </div>
    </div>
  </div>
</div>

answered Jul 17, 2018 at 6:12

gotnull

27.2k23 gold badges143 silver badges207 bronze badges

Collectives™ on Stack Overflow

Angular display Object in array via *ngFor

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related