TypeScript Define an Array

Question

im new to TS and wondering how to make this work,

products: any;

ngOnInit() {
        this.productService.getProducts().subscribe(data => this.products = data);
        console.log(this.products)
    }

By declaring products "any" this works just fine but products is undefined. Later in the code i will need products to be defined becouse of this ERROR TypeError: Cannot read properties of undefined (reading 'trim').

So i tried this

products = new Array<Object>();

ngOnInit() {
       this.productService.getProducts().subscribe(data => this.products = data);
       console.log(this.products)
   }

this says that Type 'Object' is not assignable to type 'Object[]'

another try

products: { id: number, cislo: string, nazov: string}[];

ngOnInit() {
        this.productService.getProducts().subscribe(data => this.products = data);
        console.log(this.products)
    }

this follows with

Property 'products' has no initializer and is not definitely assigned in the constructor.

what way sould i declare products so they will be defined?

.... EDIT

getProducts looks like

getProducts() {
        return this.http.get('http://localhost:8080/zakon/getAListOfAll');
    }

and it returns this json

[
  {
    "id": 0,
    "cislo": "0/0",
    "nazov": "bez zakona"
  },
  {
    "id": 1,
    "cislo": "156/25",
    "nazov": "zakon 165 o niecom z roku 123"
  },
  {
    "id": 2,
    "cislo": "222/22",
    "nazov": "zakon 166 o niecom z roku 1234"
  }
]

Does this answer your question? [Property '...' has no initializer and is not definitely assigned in the constructor](https://stackoverflow.com/questions/49699067/property-has-no-initializer-and-is-not-definitely-assigned-in-the-construc) — jitender, Dec 06 '22 at 10:12
And also `console.log()` will not give you the desired output as it's outside of the async call to the `productService.getProducts()` — Harun Yilmaz, Dec 06 '22 at 10:20
It sounds like i does but now i have declared products to be array but when i load data into it `Type 'Object' is not assignable to type 'any[]'` — Jatel, Dec 06 '22 at 10:24

score 0 · Accepted Answer · answered Dec 06 '22 at 10:15

0

    export interface Product : { 
    id: number, 
    cislo: string,
     nazov: string
    }
    //@Component....
    
    products:Product[]=[]
    
    ngOnInit() {
             this.getProducts()  
        
               
            }

getProducts(){
this.productService.getProducts().subscribe(
        (data:Product[] )=> {
         this.products = data
         console.log(this.products)
        })
}

answered Dec 06 '22 at 10:15

Chady BAGHDADI

203
2
7

```No overload matches this call. Overload 1 of 3, '(observer?: Partial> | undefined): Subscription', gave the following error. Type '(data: Product[]) => void' has no properties in common with type 'Partial>'.``` Error on data:Product[] – Jatel Dec 06 '22 at 10:32
1

verify the shape of data returned by the backend just console.log("data",data) ..verify that data has the same shape of product interface (array of object) – Chady BAGHDADI Dec 06 '22 at 10:55
I solve it by making variables in interface optional lise so `id?:number;` but im accepting your answer couse it led me to the solution, thanks – Jatel Dec 07 '22 at 08:09

score 0 · Answer 2 · answered Dec 06 '22 at 10:26

products: { id: number, cislo: string, nazov: string}[];

ngOnInit() {
    this.productService.getProducts().subscribe(data => {
      this.products = data;
      console.log(this.products);
    });
}

You are accessing products outside the callback function. As it will log this.products like a static code here where the api call is async. Try it this way and access it inside the callback function.

TypeScript Define an Array

2 Answers2