Initializing array of objects - Angular

Question

I have an array of objects and when I try to access to it, I get an error saying:

TypeError: Cannot set property 'ID' of undefined

My code is the following:

export class Carimplements OnInit {
  pieces: Piece[] = [];

  test(pos){
    this.pieces[pos].ID = "test";
  }
}

being Piece an object

export class Piece{
    ID: string;
    doors: string;
}

I call to test(pos) from the HTML with a valid position.

I guess that I am trying to access to the position X of an array that has not been initialized. How could I do it? Is it possible to create a constructor?

Yes sorry, that's been just a typo. But the error keeps persisting. — bellotas
– bellotas, Commented Mar 19, 2018 at 11:29

martin · Accepted Answer · 2018-03-19 11:26:57Z

19

Correct syntax for defining array types in TypeScript is this:
```
pieces: Piece[] = [];
```
The error is a runtime error. When you run your app you have an empty array pieces (but the variable still initialized with []) but you call test(whatever) which tries to access an array element whatever that doesn't exist.

You can do for example this:
```
pieces: Piece[] = [{
  ID: '1',
  doors: 'foo'
}];
```
and then test this method with test(0).

answered Mar 19, 2018 at 11:26

martin

97.4k26 gold badges205 silver badges237 bronze badges

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

2 Comments

bellotas Over a year ago

pieces = Piece[] = [] was just a typo. I meant pieces: Piece[] = []; But the error keeps persisting.

martin Over a year ago

Can you make a demo?

TLP · Accepted Answer · 2018-03-19 12:02:19Z

1

How about this?

export class Carimplements OnInit {
  pieces: Piece[] = [];

  test(pos){
    this.pieces[pos] = {ID: "test"};
  }
}

answered Mar 19, 2018 at 12:02

TLP

1,2881 gold badge9 silver badges20 bronze badges

Comments

Shashidhar Mayannavar · Accepted Answer · 2018-03-19 12:04:33Z

1

let pieces: Piece[]  = [];

//initialize object before assigning value
test(pos){
    this.pieces[pos] = new Piece();
    this.pieces[pos].ID = "test";
  }

answered Mar 19, 2018 at 12:04

Shashidhar Mayannavar

5605 silver badges19 bronze badges

Comments

Ekansh Rastogi · Accepted Answer · 2018-03-19 11:42:47Z

0

You can try the following method

 test(pos){
    if(pos < this.pieces.length)
      this.pieces[pos].ID = "test";
    else
      // throw error
  }

answered Mar 19, 2018 at 11:42

Ekansh Rastogi

2,5662 gold badges17 silver badges25 bronze badges

1 Comment

bellotas Over a year ago

No. Pos is correct. Actually in this case I am trying to access to pos = 0, which is the first one.

Collectives™ on Stack Overflow

Initializing array of objects - Angular

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related