Converting Json response into comma separated (thousands) - Angular 5 - ES6

Question

Is that any elegant way to convert json response into comma separated number (for showing currency purpose).

This is what I have so far:

let data = {      
   "business":{        
      "trasactionTableData":[  
         {  
            "Date":"2019-08-19T00:00:00",
            "Item Details":"Plastic - Grade A",
            "slotShare":"30",
            "assetBeforeonMarket":"24.000000",
            "profitAfterSales":"0.000000",
            "actualProfit":"22",
            "actualAmount":"USD 10.00"
         },
         {  
            "Date":"2019-08-19T00:00:00",
            "Item Details":"Cashless for Cash",
            "slotShare":"32",
            "assetBeforeonMarket":"60.000000",
            "profitAfterSales":"60.000000",
            "actualProfit":"0",
            "actualAmount":"USD 7400.10"
         },
         {  
            "Date":"2019-08-19T00:00:00",
            "Item Details":"Cashless for Cash",
            "slotShare":"33",
            "assetBeforeonMarket":"81.000000",
            "profitAfterSales":"81.000000",
            "actualProfit":"0",
            "actualAmount":"USD 200.59"
         }
      ],      
   }
}


 for (let i = 0; i < data.trasactionTableData.length; i++) {
        let slotShare = this.eosTblData[i].slotShare;
        let actualAmount = this.eosTblData[i].actualAmount;
        /*
    // need to convert below as well
    let assetBeforeonMarket = this.eosTblData[i].assetBeforeonMarket;
        let profitAfterSales = this.eosTblData[i].profitAfterSales;*/

        console.log('before convert', slotShare, 'After convert', String(slotShare).replace(/(.)(?=(\d{3})+$)/g,'$1,'));
    }

but what I'm getting is before convert 24.000000 After convert 24.,000,000

Expected result for this example:

566,556,00

How to approach this in elegant way to achieve this conversion?

Possible duplicate of [Javascript Thousand Separator / string format](https://stackoverflow.com/questions/3753483/javascript-thousand-separator-string-format) — devDan, Sep 23 '19 at 10:48
Use the [currency pipe](https://angular.io/api/common/CurrencyPipe) : it doesn't change your data but displays it as you want — , Sep 23 '19 at 10:49
@dince12 this answer is suited for JS, Angular has another way of doing it — , Sep 23 '19 at 10:50

score 2 · Answer 1 · edited Sep 23 '19 at 11:43

2

You can use toLocalString to format your number.

e.g.:

const number = 5000;
const localeNumber =  number.toLocaleString('en-GB');
console.log(localeNumber); // log 5,000

edited Sep 23 '19 at 11:43

Amadou Beye

2,538
3
16
37

answered Sep 23 '19 at 10:50

Norbert Bartko

2,468
1
17
36

score 2 · Answer 2 · answered Sep 23 '19 at 10:52

2

Yes, there is. If you just want to show the currency formatted, without changing its value, you can use the CurrencyPipe, like this:

    <p>{{ value | currency:'USD' }}</p>

answered Sep 23 '19 at 10:52

dpolicastro

1,379
1
14
22

score 2 · Answer 3 · answered Sep 23 '19 at 10:54

2

Simply use the number pipe instead.

To give an example:

{{ '1234567' | number:'.2'}}

DEMO

answered Sep 23 '19 at 10:54

Sajeetharan

216,225
63
350
396

could you pls tell me how to convert this. "actualAmount":"USD 200.59" – Mr. Learner Sep 23 '19 at 11:19
what is the input and output? – Sajeetharan Sep 23 '19 at 11:20
i've already given my json structure. could you look into that? . well that's why i tried to loop through. anyways am faild – Mr. Learner Sep 23 '19 at 11:21
you want to convert "actualAmount":"USD 200.59" to what? – Sajeetharan Sep 23 '19 at 11:24
say like .. same as USD 123,345,67.00 – Mr. Learner Sep 23 '19 at 11:26
dude! tell me how do you want the output for USD 200.59 – Sajeetharan Sep 23 '19 at 11:27
dude forget about that. lets assume , 'USD 2560.99.' to USD 2,560.99. hope im right :( – Mr. Learner Sep 23 '19 at 11:37
Yeah accept this. but have to talk to Back end guys to change the data structure – Mr. Learner Sep 23 '19 at 11:49
bascially . i getting value for different currency format. but in Back end they could able to decimal point only. so they ask FE team to do comma separation . this is what im working on – Mr. Learner Sep 23 '19 at 11:55

Converting Json response into comma separated (thousands) - Angular 5 - ES6

3 Answers3