CODEWITHSUNDEEP
arraysangulartypescriptangular6ngfor
Sharad Mishra
Sharad Mishra

Reputation: 187

I am using ngFor on Array of objects and in html the data is not displaying

I am new to angular and stuff.

Below is the format of the array which is I am getting in the console.

[]
0: {_id: "5b90fb38345c932d46e61dae", name: "Andhra Pradesh", abbvr: "AP"}
1: {_id: "5b90fb38345c932d46e61daf", name: "Arunachal Pradesh", abbvr: "AR"}
2: {_id: "5b90fb38345c932d46e61db1", name: "Bihar", abbvr: "BR"}
3: {_id: "5b90fb38345c932d46e61db6", name: "Gujarat", abbvr: "GJ"}
4: {_id: "5b90fb38345c932d46e61db3", name: "Chhattisgarh", abbvr: "CG"}
5: {_id: "5b90fb38345c932d46e61db8", name: "Himachal Pradesh", abbvr: "HP"}
6: {_id: "5b90fb38345c932d46e61dbb", name: "Karnataka", abbvr: "KA"}
7: {_id: "5b90fb38345c932d46e61dbd", name: "Madhya Pradesh", abbvr: "MP"}
8: {_id: "5b90fb38345c932d46e61dc0", name: "Odisha", abbvr: "OR"}
9: {_id: "5b90fb38345c932d46e61dc2", name: "Punjab", abbvr: "PB"}
10: {_id: "5b90fb38345c932d46e61dc5", name: "Tamil Nadu", abbvr: "TN"}
11: {_id: "5b90fb38345c932d46e61dc7", name: "Tripura", abbvr: "TR"}
12: {_id: "5b90fb38345c932d46e61dca", name: "West Bengal", abbvr: "WB"}
13: {_id: "5b90fb38345c932d46e61db2", name: "Chandigarh", abbvr: "CD"}
14: {_id: "5b90fb38345c932d46e61dcc", name: "Andaman and Nicobar Islands", abbvr: "AN"}
15: {_id: "5b90fb38345c932d46e61db7", name: "Haryana", abbvr: "HR"}
16: {_id: "5b90fb38345c932d46e61dbc", name: "Kerala", abbvr: "KL"}
17: {_id: "5b90fb38345c932d46e61dc1", name: "Puducherry", abbvr: "PY"}
18: {_id: "5b90fb38345c932d46e61dc6", name: "Telangana", abbvr: "TL"}
19: {_id: "5b90fb38345c932d46e61dcb", name: "Manipur", abbvr: "MN"}
20: {_id: "5b90fb38345c932d46e61db0", name: "Assam", abbvr: "AS"}
21: {_id: "5b90fb38345c932d46e61db4", name: "Delhi", abbvr: "DL"}
22: {_id: "5b90fb38345c932d46e61db9", name: "Jammu and Kashmir", abbvr: "JK"}
23: {_id: "5b90fb38345c932d46e61db5", name: "Goa", abbvr: "GA"}
24: {_id: "5b90fb38345c932d46e61dbe", name: "Maharashtra", abbvr: "MH"}
25: {_id: "5b90fb38345c932d46e61dc3", name: "Rajasthan", abbvr: "RJ"}
26: {_id: "5b90fb38345c932d46e61dba", name: "Jharkhand", abbvr: "JH"}
27: {_id: "5b90fb38345c932d46e61dbf", name: "Meghalaya", abbvr: "ML"}
28: {_id: "5b90fb38345c932d46e61dc8", name: "Uttar Pradesh", abbvr: "UP"}
29: {_id: "5b90fb38345c932d46e61dcd", name: "Mizoram", abbvr: "MZ"}
30: {_id: "5b90fb38345c932d46e61dc4", name: "Sikkim", abbvr: "SK"}
31: {_id: "5b90fb38345c932d46e61dc9", name: "Uttarakhand", abbvr: "UK"}
32: {_id: "5b90fb38345c932d46e61dce", name: "Nagaland", abbvr: "NL"}

and HTML for the ngFor is:

<option  *ngFor="let state of states" [value]="state.name">{{state.name}}</option>

In display there is number of option but nothing is visible when i am printing in console it shows undefined

Edit 1: Below is the code of components which uses service 

import { Component, OnInit } from '@angular/core';
import {VenueService} from './venue.service';


@Component({
  selector: 'app-workshop',
  templateUrl: './workshop.component.html',
  styleUrls: ['./workshop.component.css']
})
export class WorkshopComponent  {
states=[];
  constructor(private venueService: VenueService) {

  }
  ngOnInit(){
   this.venueService.getStates().subscribe(state => {
     state.forEach(entry=>{
       this.states.push(entry);
     });
    });
    console.log(this.states);
  }

}

Edit 2: I am Using Observable during api call and Interface, so this would be my service method looks like:

getStates(): Observable<State[]>{
return http.get<State[]>('http://localhost:3000/api/getstate');
 }

Upvotes: 2

Views: 936

Answers (5)

Soufiane Elmoudden
Soufiane Elmoudden

Reputation: 151

It should show an empty array because you have an async method if you want to display a array after the method you must use aysnc /wait or asyn pip in html:

  async ngOnInit()
  {     const states= await                               
       this.venueService.getStates().toPromise();
        console.log(states);
  }
<option  *ngFor="let state of states" [value]="state.name">{{state.name}}</option>

For second way:

it already mentioned in first Answer

Upvotes: 4

buzzwauld
buzzwauld

Reputation: 36

If you can use the Observable directly from your service, as your example suggests, then the answer by Joseph Webber gets my vote.

However, if you want to perform some processing on the result first, then you can notify angular to detect your change, by calling detectChanges on the component's change detector.

For example:

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { VenueService } from './venue.service';

@Component({
  selector: 'app-workshop',
  templateUrl: './workshop.component.html',
  styleUrls: ['./workshop.component.css']
})
export class WorkshopComponent implements OnInit  {
  states = [];
  constructor(private venueService: VenueService,
    private changeDetector: ChangeDetectorRef) {
  }

  ngOnInit() {
    this.venueService.getStates().subscribe(state => {
      // Do some stuff with the results ... 
      state.forEach(entry => {
        this.states.push(entry);
      });
      // Let angular know.
      this.changeDetector.detectChanges();
  });
  console.log(this.states);
 }
}

Upvotes: 2

Joseph Webber
Joseph Webber

Reputation: 2173

Use the async pipe in your HTML and set states to the observable returned from your service.

<option *ngFor="let state of states | async" [value]="state.name">{{state.name}}</option>

ngOnInit(){
  this.states = this.venueService.getStates();
}

Upvotes: 0

Sudarshana Dayananda
Sudarshana Dayananda

Reputation: 5265

venueService.getStates() is asynchronous function.

Try below.

  ngOnInit(){
   this.venueService.getStates()
         .subscribe(state => {
             state.forEach(entry=>{
               this.states.push(entry);
           });
         console.log(this.states);
        });
  }

Upvotes: 0

Yuvaranjani
Yuvaranjani

Reputation: 310

Try like this, 

<option  *ngFor="let state of states" [ngValue]="state">{{state.name}}</option>

Upvotes: 0

Related Questions