Typescript array randomly becomes undefined

Question

I have been trying to get data from my webservice into an array of my custom type (both models match, I have checked that)

The object itself people is defined and initialised as a black array of type Person.

However when making the subscribe call the array is now undefined.

This was working, I'm not actually sure why it stopped

Declaration

  people: Person[] = [];

Subscription

getPeople() {
    this.isLoading$.next(true);
    this.PeopleService.GetAll().subscribe(
      o => {
        if (o) {
          this.people = o;
        }
        else {
          this.people = [];
        }
      },
      error => {
        console.log(error);
      },
      () => {
        this.isLoading$.next(false);
      }
    );
  }

Before the method, this.people is defined as Array[0]

When in the getPeople method, this.people is undefined. o is defined and has data.

UPDATE 1 10:41 2019/05/03

I noticed the following when debugging

could this be the cause, if so why? I've been writing all my methods like this and none have ever given me this issue

Try this, In case of error, put this.people = []; also. the problem is, in error section you are not handling error. make sure that the api call is working currectly — m.akbari
– m.akbari, Commented May 3, 2019 at 8:28
@Darkestlyrics please provide enough code so that the problem was more apparent. At the moment what you claim - is impossible — zerkms
– zerkms, Commented May 3, 2019 at 8:47
@zerkms I seem to have stumbled onto why, posting the answer now. — Darkestlyrics
– Darkestlyrics, Commented May 3, 2019 at 8:50

Poul Kruijt · Accepted Answer · 2019-05-03 09:02:19Z

2

My guess is you are using the debugger/breakpoints inside your IDE to check the value. I also guess you are compiling your typescript to es5. Another guess is that the sourcemaps are not loading inside your debugger environment.

All this combined makes a nice incoherent mess for you.

What typescript does under the hood with the arrow function notation () => {}, is set a _this = this before the arrow, and change the function to function() {}, which will have a new this context. This happens when you compile to a version that does not support the arrow notation.

If you actually do console.log(this.people) instead of setting a breakpoint, it will output the correct/expected value. This is compiled to console.log(_this.people) to the this of the outer scope. Does that make sense?

Anyways, you should find a way to have your IDE load the sourcemaps, or use the chrome debugger which does load the correct sourcemaps, and give you a more concise picture of your code

answered May 3, 2019 at 9:02

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

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

1 Comment

Darkestlyrics Over a year ago

That is interesting, I'll keep that in mind. Thanks for the explanation.

Darkestlyrics · Accepted Answer · 2019-05-03 08:54:14Z

0

I noticed that this section

        o => {
        if (o) {
          this.people = o;
        }
        else {
          this.people = [];
        }

Changes this to be of type SafeSubscriber instead of the actual Component. So by all rights, this.people IS undefined in that scope.

Changing it to

  o => (this.people = o)

works as expected

I'm not entirely sure why and if anyone can figure that out I'll gladly mark it as the accepted answer.

answered May 3, 2019 at 8:54

Darkestlyrics

3101 gold badge6 silver badges16 bronze badges

2 Comments

zerkms Over a year ago

That code cannot change this, it's impossible. Your solution is semantically identical and cannot change the observed behaviour.

Darkestlyrics Over a year ago

@zerkms PierreDuc gives a nice explanation as to what happens.

Collectives™ on Stack Overflow

Typescript array randomly becomes undefined

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related