angular TS loop through incoming data

Question

I am trying to loop through an array of incoming data so that I can display the information on a map in leaflet!

here is my class:

export class OpenStreetMapComponent implements OnInit {
  @Output() private add = new EventEmitter();
  @Output() private edit = new EventEmitter<number>();
  artworkList: Artwork[];

the data as it comes in is stored in the artworkList array

constructor(private artworkService: ArtworkService) { }
  ngOnInit() {
    this.refresh();
  }

  refresh() {
    this.artworkService.retrieveAll().then(
      artworkList => this.artworkList = artworkList
    );
    for (let artwork of this.artworkList) {
      console.log(artwork.name);
  }

for some reason i keep getting this error is my console:

ERROR TypeError: "_a is undefined"

You retrieve the data through an async call as promise, but you iterate over the array syncronously. You should move your for loop into the then call. — Oliver
– Oliver, Commented Jan 23, 2019 at 13:10

Philipp Meissner · Accepted Answer · 2019-01-23 13:14:07Z

2

Your loop operates synchronously, whereas you fetch the data it iterates over asynchronously. You will have to move the actual loop into the then-block so that you do not access a possibly undefined value.

constructor(private artworkService: ArtworkService) {
}

ngOnInit() {
  this.refresh();
}

refresh() {
  this.artworkService.retrieveAll().then((artworkList) => {
    this.artworkList = artworkList;
    for (let artwork of this.artworkList) {
      console.log(artwork.name);
    }
  });
}

answered Jan 23, 2019 at 13:14

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

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

Comments

Philipp Meissner · Accepted Answer · 2019-01-24 08:14:29Z

1

.retriveAll() method is a promise, you must await this method before attempting to make use of this.artworkListor you can place the following into the .then part of the call.

for (let artwork of this.artworkList) {
  console.log(artwork.name);
}

Currently, the loop is being run asynchronously along with the call to your method that returns a Promise, which is attempting to loop through an empty this.artworkList, causing the issue.

edited Jan 24, 2019 at 8:14

Philipp Meissner

5,4925 gold badges38 silver badges61 bronze badges

answered Jan 23, 2019 at 13:13

Kes Walker

1,5532 gold badges15 silver badges29 bronze badges

Collectives™ on Stack Overflow

angular TS loop through incoming data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related