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

Question

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');
 }

can you add the code of how assigning the data to the states var? — Jacopo Sciampi
– Jacopo Sciampi, Commented Sep 14, 2018 at 11:53
Is fine. I solved your problem but I can't see even this example in my browser: w3schools.com/html/html_form_elements.asp. It's just empty — Jacopo Sciampi
– Jacopo Sciampi, Commented Sep 14, 2018 at 12:11
You said: Below is the format of the array which is I am getting in the console. and there is data in the array. Later you say: [...] when i am printing in console it shows undefined. This does not make sense. So when you log the array in the console, does it display the data or not? — L. Guthardt
– L. Guthardt, Commented Sep 14, 2018 at 12:20

Soufiane Elmoudden · Accepted Answer · 2018-09-14 14:18:53Z

4

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

answered Sep 14, 2018 at 14:18

Soufiane Elmoudden

1516 bronze badges

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

1 Comment

Sharad Mishra Over a year ago

not using promise it's not working. can you explain why use toPromise? using rxjs 6.3.x and angular 6

buzzwauld · Accepted Answer · 2018-09-14 14:10:28Z

2

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);
 }
}

answered Sep 14, 2018 at 14:10

buzzwauld

363 bronze badges

2 Comments

Sharad Mishra Over a year ago

Okay this works and all other doesn't, so my question why there isnt a proper documentation of iteration and observable in Angular this is so messy.

Sharad Mishra Over a year ago

also it works without changeDetector too there was other angular error because of model binding so the data was not displaying in html.

Yuvaranjani · Accepted Answer · 2018-09-14 12:05:45Z

0

Try like this,

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

answered Sep 14, 2018 at 12:05

Yuvaranjani

3101 gold badge3 silver badges12 bronze badges

Comments

Sudarshana Dayananda · Accepted Answer · 2018-09-14 12:36:39Z

0

venueService.getStates() is asynchronous function.

Try below.

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

answered Sep 14, 2018 at 12:36

Sudarshana Dayananda

5,2652 gold badges27 silver badges45 bronze badges

Comments

Joseph Webber · Accepted Answer · 2018-09-14 13:20:02Z

0

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();
}

answered Sep 14, 2018 at 13:20

Joseph Webber

2,1731 gold badge21 silver badges41 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related