Preparing the data before displaying it

Question

Preparing the data before displaying it

I have a data display in the view that needs to be formatted first. Previously, I used val.toFixed(2) which worked fine for numbers, but when letters were included with the numbers, the formatting didn't account for them and only displayed the numbers.

Therefore, I need a solution that can handle both letters and numbers, where only the numbers require formatting like this: 234235.34.

Below is some of the code snippet I am currently using:

<table>
    <tr>
        <th ng-repeat='header in headers'>{{header.th}}</th>
    </tr>
    <tr>
        <td ng-repeat='data in headers'>
          <div ng-repeat='inner in data.td'>
            <span ng-repeat='(prop, val) in inner'>{{val.toFixed(2)}}</span>
          </div>
        </td>
    </tr>
</table>

This functionality is controlled by the following controller:

$scope.LoadMyJson = function() {
      // Code logic here
};

You can find a working example on this Fiddle.

Currently, the table is displaying correctly but missing the name column due to the use of the toFixed method.

If you have any ideas or suggestions on how to approach this issue, please let me know. Thank you!

javascript angularjs

Answer 1

Answer №1

Add a personalized filter to implement in your template.

<table>
    <tr>
        <th ng-repeat='header in headers'>{{header.th}}</th>
    </tr>
    <tr>
        <td ng-repeat='data in headers'>
          <div ng-repeat='inner in data.td'>
            <span ng-repeat='(prop, val) in inner'>{{val|formatValue}}</span>
          </div>
        </td>
    </tr>
</table>


angular.module('whatever').filter('formatValue', function () {
  return function (value) {
    if (isNaN(parseFloat(value))) {
      return value;
    }

    return parseFloat(value).toFixed(2);
  } 
});

Answer 2

Add a personalized filter to implement in your template.

<table>
    <tr>
        <th ng-repeat='header in headers'>{{header.th}}</th>
    </tr>
    <tr>
        <td ng-repeat='data in headers'>
          <div ng-repeat='inner in data.td'>
            <span ng-repeat='(prop, val) in inner'>{{val|formatValue}}</span>
          </div>
        </td>
    </tr>
</table>


angular.module('whatever').filter('formatValue', function () {
  return function (value) {
    if (isNaN(parseFloat(value))) {
      return value;
    }

    return parseFloat(value).toFixed(2);
  } 
});

Answer 3

Answer №2

If you want to display formatted data in your view using AngularJS as your MVC frontend framework, try this method:

First, create a filter within your Angular application.
Next, include the filter in your index.html file.
Finally, use the filter in your code like this: {{somedata | filterName}}

This simple Angular filter can help solve your problem:

angular.module('app')
.filter('formatHeader', function() {
    return function(data) {

        if(angular.isNumber(data)) {
            return data.toFixed(2);
        }

        return data;
    }
});

To implement this filter, use it in your code like this:

<table>
<tr>
    <th ng-repeat='header in headers'>{{header.th}}</th>
</tr>
<tr>
    <td ng-repeat='data in headers'>
      <div ng-repeat='inner in data.td'>
        <span ng-repeat='(prop, val) in inner'>{{val | formatHeader}}</span>
      </div>
    </td>
</tr>

For further reading, check out these references:

Answer 4

If you want to display formatted data in your view using AngularJS as your MVC frontend framework, try this method:

First, create a filter within your Angular application.
Next, include the filter in your index.html file.
Finally, use the filter in your code like this: {{somedata | filterName}}

This simple Angular filter can help solve your problem:

angular.module('app')
.filter('formatHeader', function() {
    return function(data) {

        if(angular.isNumber(data)) {
            return data.toFixed(2);
        }

        return data;
    }
});

To implement this filter, use it in your code like this:

<table>
<tr>
    <th ng-repeat='header in headers'>{{header.th}}</th>
</tr>
<tr>
    <td ng-repeat='data in headers'>
      <div ng-repeat='inner in data.td'>
        <span ng-repeat='(prop, val) in inner'>{{val | formatHeader}}</span>
      </div>
    </td>
</tr>

For further reading, check out these references:

Preparing the data before displaying it

Answer №1

Answer №2

Similar questions

How can I load a .json file into JavaScript without inserting it directly into the code?

In order to ensure functionality on Firefox 3 and Opera, it is essential to include multiple <script> tags and the <!-- //required for FF3 and

I'm experiencing a challenge with Next.js where I am unable to use return within

Using React Native to implement Firebase onSnapshot with FlatList pagination

What is the best way to establish my permit requirements on a monthly basis?

Ionic Vue Modal displays duplicated content

Potential dangers involved in sending HTML content through an AJAX request over a secure HTTPS connection

Struggling with the integration of a custom login feature using next-auth, leading to being constantly redirected to api/auth/error

Is there a way to showcase a PHP code snippet within JavaScript?

Having trouble accessing a website that is embedded within an iframe, and experiencing issues with several ajax post requests not functioning properly within the iframe specifically on Chrome

What is the best way to transfer information from an old JSON file to a new JSON file using JavaScript

Ways to transfer ID to a different HTML page

What is the best way to ensure that custom JavaScript and CSS files in Sphinx are always loaded with the most recent changes

"Encountering a delay in the passport authentication callback process

Refresh the dropdown menu selection to the default option

The error "TypeError: ollama.chat is not a function" has occurred when trying to use the ollama module in

How to harness the power of loops in JavaScript

Versatile dataTable designed to seamlessly integrate with various data structures

Why isn't the mounted() lifecycle hook being triggered in my Vue 3 component?

Generating an array in Javascript using JSON