"Hello everyone! I need some assistance with formatting numbers. Specifically, I am trying to convert 33304 to 333,04 and 108100 to 1081,00, while keeping two decimal places after the comma separator. I've attempted using Javascript format functions without success. Can anyone provide me with a solution? Your help would be greatly appreciated. Thank you!"
With JavaScript or TypeScript only, you have the ability to create:
function convertNumber(n) {
return (n / 100).toFixed(2).replace('.', ',');
}
Examples of usage:
convertNumber(33304) === '333,04';
convertNumber(108100) === '1081,00';
convertNumber(101) === '1,01';
convertNumber(50) === '0,50';
convertNumber(1) === '0,01';
convertNumber(0) === '0,00';
To achieve the desired transformation, Custom Pipes are a great solution. Take a look at the example below:
//Component
import {Component} from '@angular/core';
@Component({
'selector' : 'app-sample',
template : ' <p> Number {{sampleValue | convertPipe}} '
})
export class SampleComponent{
public sampleValue = 33300;
}
// custom Pipe
import {Pipe} from '@angular/core';
@Pipe(
{name: 'convertPipe'}
)
export class ConvertPipe{
transform(value: number){
let temp1 , temp2 , returnValue;
temp1 = value/100;
temp2 = value%100;
if(temp2 != 0){
returnValue = temp1 + ',' +temp2;
} else{
returnValue = temp1 + ',00';
}
return returnValue;
}
}
Give this a try and see how it works for you.
When looking to format numbers, one method you can use is the number formatting approach:
function formatNumber(num) {
return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}
console.info(formatNumber(2665)) // 2,665
console.info(formatNumber(102665)) // 102,665
console.info(formatNumber(111102665)) // 111,102,665
source:
Alternatively, you can also utilize the following method:
var str="33304";
var resStr=str.substring(0,str.length-2)+","+str.substring(str.length-2);
console.log(resStr);
I am currently facing an issue while trying to display the cover art along with the search results. There seems to be a problem in the img src tag that is preventing the app from loading properly. Interestingly, when I direct the img to data.tracks[i].albu ...
Our website is powered by Opencart 1.5.6.4 and the code snippet below is used to add items to the shopping cart. <input type="button" value="<?php echo $button_cart; ?>" onclick="addToCart('<?php echo $product['product_id']; ?&g ...
Snippet: https://jsfiddle.net/mjvu6bn7/ I have a watcher implemented on a computed property in my Vue component. This computed property depends on a Vuex store variable that is set asynchronously. Despite trying to update the data variable of the Vue comp ...
I've configured webpack-dev-server to act as my development server, bundling all of my source code into a single JavaScript file. While it's working well, I'm having trouble debugging my code in Chrome. I can view my JS source code in the Ch ...
Hi there, I'm experiencing some issues with my calculator. The buttons seem to be working fine and lining up correctly, but for some reason, nothing is showing up on the monitor or getting calculated when I press the buttons. Here's the code that ...
Experiencing a problem where req.target sometimes returns undefined, causing issues with other functionalities dependent on req.target. Seeking assistance to resolve this issue. Appreciate any help! ...
Currently, I have implemented a Predefined bootstrap calendar on my page. It is functioning perfectly, but for specific text boxes, I would like to display a calendar with only the option to select the year. Here are my Codes: <!-- bootstrap datepicke ...
Imagine a scenario where there are 5 checkboxes, each with a unique value mapped to a specific list of elements. In my particular case, I have an associative PHP array as shown below: [100] => Array ( [0] => Array ( [name] => NameABC [sid] => ...
I've been trying to align the navigation item with the logo on the same line within the toolbar, but I'm facing an issue where they keep appearing in different rows. To see the error for yourself, check out the code sandbox here. This is how I s ...
I successfully developed a Mobile application using Cordova, Onsen UI, and Vue.js. While addressing network connectivity issues, I incorporated the cordova plugin cordova plugin add cordova-plugin-network-information For determining the type of connectio ...
I'm currently working on setting up a web application that needs to be able to use client-side JavaScript for localization, especially since it will need to function offline. In order to achieve this, I have created a function and a JSON array within ...
I am facing a challenge while trying to fetch an asset, specifically an image, from Contentful and display it in my Angular application. Despite seeing the images in the Network log, I keep encountering an issue where the console.log outputs undefined. Any ...
I'm encountering an issue with jQuery slideToggle, and here's the code I have: $(".dropdownmainmenu").click(function(){ $(this).children(".showmenu").slideToggle(); $(this).toggleClass("activemainmenu"); $(this).find(".showarrowmainmen ...
I am attempting to store the information from an ndjson file into a JavaScript variable. I have experimented with using both arrays and objects, but encountered errors in the process. This is what I tried: var data = [{"attributes":{}} {"attributes":{}} ...
I've been experimenting with using AJAX in a PHP form, but for some reason it's not working as expected. I'm at a loss trying to figure out why. Here is my code: <!DOCTYPE html> <html lang="es"> <head> <title>< ...
I'm currently working on a project that requires taking input from the keyboard. The user should be able to enter multiple words and once they press CTRL+D, the program should exit and display the result. For instance, this is what can be entered in ...
I am currently developing a search application using NextJs 13, and I have encountered an issue where the page refreshes every time I click the search button. Strangely, this only happens when the application is deployed on Vercel. When running the app l ...
I'm having trouble understanding why this code snippet is not functioning as expected. const addRate = (e: { charCode: KeyboardEvent }) => { if (e.charCode >= 48) { ... } } The error message I receive states: 'Operator '>=& ...
The database stores the URL that should load the module from the 'dist' directory. { "personal-area": "js/compile-module.js", "product": "js/compile-module2.js" } For example, when using the application: http://localhost:8282/#/personal-ar ...
My S3-like react application with redux is powered by AWS SDK v3 for JS. The client initialization in my auth.js file looks like this: auth.js export const s3Client = new S3Client({ region: 'default', credentials: { accessKeyId: 'te ...