CODEWITHSUNDEEP
node.jsangularmongodb
indu ECE
indu ECE

Reputation: 85

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

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.

Upvotes: 1

Views: 4372

Answers (3)

Arif Rathod
Arif Rathod

Reputation: 693

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

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

Upvotes: 0

BigSpicyPotato
BigSpicyPotato

Reputation: 739

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>

Upvotes: 2

Sajeetharan
Sajeetharan

Reputation: 222582

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>

Upvotes: 1

Related Questions