how to itrate over [object Object] in angular component class

Question

I want to get service API data into component class and manipulate data before sending to html. Below is my component class code,

  discountlists:Autodiscount;
  filterdata:any;

onChangeCountry(id: string){
  if(id == 'none'){
    alert("No Code Selected");
  }else if(id != null || id != ''){
    this.filterdata = this.autopostService.getDiscountSchemesById(id).subscribe(
      (data) => this.discountlists = data,
      error => this.error = error
    );
    alert(this.filterdata);
  }
}

Here i am storing values in filterdata which is type any and i am getting values from service api as below,

{
   "discount_id": "1",
   "discount_code": "SAVE20",
   "discount_price": "10%",
   "start_discount_date": "2019-12-17T00:00:00.000+0000",
   "end_discount_date": "2019-12-30T05:10:45.680+0000",
   "discount_on_car": true,
   "discount_on_part": false,
   "discount_on_All": false,
   "discount_on_cars": [
       "Nissan"
   ],
   "discount_on_parts": [
       ""
   ]
}

above value is being cast into a class file discountlists:Autodiscount; I want to perform some operations from above values and then i want to display that value into html. As i am getting values in [object Object] how can i cast this into string?

aren't you able to manipulate using this.discountlists.discount_price = 20% like this? — Mridul, Dec 31 '19 at 06:50
actually i want to perform arithmetic operation using value of "discount_price": "10%". — nilay, Dec 31 '19 at 06:50
No i dont want to update i want the value to perform operation — nilay, Dec 31 '19 at 06:52
https://stackoverflow.com/questions/41396435/how-to-iterate-object-keys-using-ngfor/41396555 — Nitheesh, Dec 31 '19 at 06:53

Adrita Sharma · Answer 1 · 2019-12-31T07:09:16.073

0

To get the value, first access the property by this.data.discount_price, to get the numeric number, replace the character % and then cast it to numeric value using parseFloat

Try like this:

let discountPercent = parseFloat(this.data.discount_price.replace("%", ""));

Working Demo

edited Dec 31 '19 at 07:09

answered Dec 31 '19 at 06:59

Adrita Sharma

21,581
10
69
79

still getting undefined – nilay Dec 31 '19 at 07:05
1

`Number()` does not convert non-numeric values to number. You can use `parseFloat()` instead. See: https://stackoverflow.com/a/13676265/1331040 – Harun Yilmaz Dec 31 '19 at 07:07
@nilay Can you check the demo. Is your data in the same format? – Adrita Sharma Dec 31 '19 at 07:08
yes did demo is working fine but not working in my project.Is there any way to directly cast value is Autodiscount class and use discountlists in component class to get data? – nilay Dec 31 '19 at 07:09
Can you share your code in stackbiltz. My guess is your data format isn't same – Adrita Sharma Dec 31 '19 at 07:12
i dont know how to use stackbiltz as i am new to angular – nilay Dec 31 '19 at 07:15
https://stackblitz.com/edit/angular-xeuptw Fork it, add your code and share the link – Adrita Sharma Dec 31 '19 at 07:16
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205127/discussion-between-nilay-and-adrita-sharma). – nilay Dec 31 '19 at 07:21

score 0 · Answer 2 · answered Dec 31 '19 at 07:20

Modify your this.discountlists object (perform the arithmetic operations), so it can be accessed in the HTML

onChangeCountry(id: string){
  if (id == 'none') {
    alert("No Code Selected");
  } else if (id != null || id != '') {
    this.filterdata = this.autopostService.getDiscountSchemesById(id).subscribe(
      (data) => {
        this.discountlists = data;
        this.discountlists.discount_price = parseFloat(data.discount_price.replace('%', ''));
      },
      error => this.error = error
    );
    alert(this.filterdata);
  }
}

score 0 · Answer 3 · answered Dec 31 '19 at 07:24

You can do this in the following way:

discountlists:AutoDiscount;

  filterData:any; // you can also use the model instead of any like:
// Define this under Core part, you can create a interfaces folder there and use it via adding reference to common file i.e index.ts
    export interface AutoDiscount{
      discount_id: number
      discount_code: string;
      discount_price: string;
      start_discount_date: string;
      end_discount_date: string;
      discount_on_car: boolean;
      discount_on_part: boolean;
      discount_on_All: boolean;
      discount_on_cars: Cars[];
      discount_on_parts: Parts[];
    }

    export interface Cars
    {
      Name: string;
    }

    export interface Parts
    {
      Name: string;
    }

then filterData: AutoDiscount;

    onChangeCountry(id: string){
      if(id == 'none'){
        alert("No Code Selected");
      }else if(id != null || id != ''){
        this.autopostService.getDiscountSchemesById(id).subscribe(
        (result: any) => {
          if (result.items.length) {
// Define another method in autopostService i.e formatItems to format the items of result object. You can create a business logic as per your requirement to change/update the existing JSON detail
this.filterdata = this.autopostService.formatItems(result); 
}
 });    
}

There is no need to create two different object to filter the data i.e discountlists:Autodiscount; you can do/manipulate data using one object either filterData or discountLists

how to itrate over [object Object] in angular component class

3 Answers3