How to access array inside array of object in Angular7?

Question

I am using Angular7 and have a custom class which contains a number and an array of string.

export class Page {
constructor(id: number, keywords: string[]) {}
}

Now i created an array of this object in my component and intialised it.

import {Page} from '../page';
export class SearchComponent implements OnInit {
 pages: Page [];
 constructor() { }
 ngOnInit() {
 this.pages = [
  {id:'1', Keywords:['abc', 'bca','klj']},
  {id:'2', Keywords:['asas', 'aaa']},
  {id:'3', Keywords:['dasd', 'asd']}
  ];
  consol.log(this.pages[0].keywords);
  consol.log(this.pages[0].id);
 }
}

I want to access the id, and keywords array, but this code shows compilation error saying:

Property 'id' does not exist on type 'Page' and Property 'keywords' does not exist on type 'Page'.

In page.ts, replace the code with: export interface Page { id: string, keywords: string[] }. then take care to the case of keywords. — Paleo
– Paleo, Commented Jan 31, 2019 at 10:16
It worked. Thank you so much. But Why can't I use it as a class? — Mohammed Marjan
– Mohammed Marjan, Commented Jan 31, 2019 at 10:27
You can. Then you have to use the constructor: this.pages = [new Page(1, ["a", "b"]), new Page(2, ["c", "d"])]. Then in the Page's constructor, you must keep the parameters as properties by adding the public accessor: constructor(public id: number, public keywords: string[]) {}. — Paleo
– Paleo, Commented Jan 31, 2019 at 10:30

Paleo · Accepted Answer · 2019-01-31 13:44:01Z

4

It's really a problem of beginner but… Here are the solutions:

Using an interface

Define the interface:

export interface Page {
  id: number
  keywords: string[]
}

Then, use it:

this.pages = [
  { id: 1, keywords: ['a', 'b'] },
  { id: 2, keywords: ['c', 'd' }
]

Using a class

Define the class:

export class Page {
  constructor(public id: number, public keywords: string[]) {}
}

Then, use it:

this.pages = [
  new Page(1, ['a', 'b']),
  new Page(2, ['c', 'd'])
]

edited Jan 31, 2019 at 13:44

answered Jan 31, 2019 at 10:36

Paleo

24k5 gold badges74 silver badges84 bronze badges

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

Comments

veben · Accepted Answer · 2019-01-31 10:57:18Z

3

In your code, you are initilizing this.pages, with id as a string and with keywords as a array of string.

So you have to define an interface Page:

export interface Page {
  id: string;
  keywords: string[];
}

and use it like that, changing Keywords to keywords:

this.pages = [
  {id: '1', keywords:['abc', 'bca','klj']},
  {id: '2', keywords:['asas', 'aaa']},
  {id: '3', keywords:['dasd', 'asd']}
];

If you want the id attribute as a number, go like that:

export interface Page {
  id: number;
  keywords: string[];
}
and use it like that, changing Keywords to keywords:

this.pages = [
  {id: 1, keywords:['abc', 'bca','klj']},
  {id: 2, keywords:['asas', 'aaa']},
  {id: 3, keywords:['dasd', 'asd']}
];

If you want a class instead of an interface, look at @Paleo answer.

edited Jan 31, 2019 at 10:57

answered Jan 31, 2019 at 10:21

veben

22.7k15 gold badges70 silver badges85 bronze badges

Collectives™ on Stack Overflow

How to access array inside array of object in Angular7?

2 Answers 2

Using an interface

Using a class

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Using an interface

Using a class

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related