How do I change the type of a variable in Angular

Question

I use {{product.price.toLocaleString('en-US', {style: 'currency', currency: 'CAD'})}}

To display the price in my view. It was working when I was manualy typing the value in the array in Angular.

Now I am fetching the database to fill the product array.

The price field is of Type INT

The database result are fed to angular trought an ajax request and json encoded

The price is displayed but not the $CA after it. I think the function is not seeing this value as an Number .

This is the function a use to get all my product data.

sendGetRequest(){
    this.http.get('http://localhost/ajax.php').subscribe((productList)=>{
       this.productList=productList;
    });
}

Then the angular view

<app-product data-ng-init="sendGetRequest()" (productAdded)="addProductToCart($event)" [products]="productList"> </app-product>

The actual data being diplayed

<section *ngFor="let product of products" >
      <div >
        {{product.model}}
        <br>
        <div class="preView"><img src="./assets/{{product.img}}"></div>
        {{product.price.toLocaleString('en-US', {style: 'currency', currency: 'CAD'})}}<br>
        <button (click)="addProductToCart(product)">+</button><br>
      </div>
  </section>

So i'm not sure where and how i should work with the type.

If I change my function to;

  sendGetRequest(){
    this.http.get('http://localhost/ajax.php').subscribe((productList)=>{
       this.productList=productList.map(product=>{
        product.price = +product.price; // cast to number
        return product;
      });
    });

}

I'm getting a warning;

Property 'map' does not exist on type 'Object

But visual studio offers a quickfix so I have tryed it and now my code looks like;

 private _productList: any;
  public get productList(): any {
    return this._productList;
  }
  public set productList(value: any) {
    this._productList = value;
  }

  sendGetRequest(){
    this.http.get('http://localhost/ajax.php').subscribe((productList)=>{
       this.productList=productList.map(product=>{
        product.price = +product.price; // cast to number
        return product;
      });
    });
}

Now it is working but I still get an error for the map;

ERROR in src/app/store/store.component.ts:28:37 - error TS2339: Property 'map' does not exist on type 'Object'.

28        this.productList=productList.map(product=>{

Here is an image of my screen

Answer 1

sendGetRequest(){
    this.http.get('http://localhost/ajax.php').subscribe((productList)=>{
    this.productList=productList.map(product=>{
        product.price = +product.price; // cast to number
        return product;
      });
   });
}

you just need to cast it to number. you are receiving string type price.