Angular 2 how to display the array object inside an array of objects

Question

This is my json file,

            country_id:String,
            name:String
            scholardetails:[{
                country_id:String,
                scholarshipname:String,
                scholarshiplink:String
            }]
        },{collection:'new_countryMaster'});

In frontend, for *ngFor gave like this,

 <div *ngFor="let country of countries">
       <p>{{country.name}}<p>
  </div>
<div *ngFor="let item of countries.scholardetails">
       <p>{{item.scholarshipname}}<p>
  </div>

my typescript,

countries: any;

  constructor(private route: ActivatedRoute, private http: HttpClient) { }

  ngOnInit() {
    this.getscholardetails(this.route.snapshot.params['id']);
  }

  getscholardetails(id) {
    this.http.get('http://localhost:3000/api/scholardetails/'+id).subscribe(data => {
      this.countries= data;
    });
  }

I only can get and display name and not be able to get scholardetails country_id, scholarshipname and scholarshipname. I can't find where i did mistake.please help me if anyone know.

BigSpicyPotato · Accepted Answer · 2018-09-24 05:33:08Z

2

The country variable in your *ngFor is only accessible inside it's corresponding div tag, so your frontend HTML needs to be like this:

<div *ngFor="let country of countries">
   <p>{{country.name}}<p>

   <div *ngFor="let item of country.scholardetails">
      <p>{{item.scholarshipname}}<p>
   </div>

 </div>

answered Sep 24, 2018 at 5:33

BigSpicyPotato

7395 silver badges20 bronze badges

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

Comments

Sajeetharan · Accepted Answer · 2018-09-24 05:30:58Z

1

You need to place the second ngFor inside the first one and have a nested ngFor

<div *ngFor="let country of countries"> <p>{{country.name}}<p>
    <div *ngFor="let item of countries.scholardetails">     
<p>{{item.scholarshipname}}<p>
 </div>
</div>

answered Sep 24, 2018 at 5:30

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

2 Comments

indu ECE Over a year ago

i can't understand,can you tell briefly?

Sajeetharan Over a year ago

You need to place the second ngfor within the first div

Arif Rathod · Accepted Answer · 2018-09-24 05:33:59Z

0

Try this, The second ng for should be like this.

<div *ngFor="let item of countries['scholardetails']"> {{item.scholarshipname}}
</div>

answered Sep 24, 2018 at 5:33

Arif Rathod

7134 silver badges14 bronze badges

Collectives™ on Stack Overflow

Angular 2 how to display the array object inside an array of objects

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related