Sorting dates and amounts in string format with Smart-table

Sorting is a breeze in smart-table, but what about when the date and amount are in string format? How can we sort them?

app.controller('basicsCtrl', ['$scope', function (scope) {scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate:'1987-05-21', balance: '1,20,000', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b4c3dcd5c0d1c2d1c6f4d3d9d5ddd89ad7dbd9">[email protected]</a>'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: '1987-04-25', balance: '2,000', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f203a292d232e212b203a0f28222e2623612c2022">[email protected]</a>'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: '1955-08-27', balance: '4,23,000', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196b78607476777d7c7f597e74787075377a7674">[email protected]</a>'}];
}]);

I am struggling to apply the format function inside my json. It keeps throwing an error.

formatFunction: function (value, formatParameter) {
return value[0];// some function to change string to date.
}

Referencing this documentation:

Can anyone offer assistance? I'm new to this field...

javascriptangularjsdate-sortingsmart-table

Answer №1

To transform dates from a string into a desired format, you can utilize a filter.

app.filter('customDateFormatter', function () {
    return function (inputArray) {
        angular.forEach(inputArray,function(item,index){
            item.birthDate = new Date(item.birthDate)
        });
        return inputArray;
    };
});

After defining the filter, apply it in your HTML like this:

<smart-table rows="rowCollection | customDateFormatter"></smart-table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unwrapping nested objects in a JSON array with JavaScript: A step-by-step guide

After trying some code to flatten a JSON, I found that it flattened the entire object. However, my specific requirement is to only flatten the position property. Here is the JSON array I am working with: [{ amount:"1 teine med 110 mtr iletau" comment:"" ...

javascripttypescript

Find out the keycode of an event in ReactJS when a key is released

Whenever I try to get keyCode on a keyUp event, it always returns 0. Why is this happening? I want to avoid using keypress and similar methods, and I also need to utilize an arrow function: handleKeyPress = (e, type) => { let KeyCode = e.charCode; ...

javascriptreactjs

Struggling with Ajax and Javascript. Continuously looping through prior requests

I've got this neat Ajax code that loads in PHP content. When you click on a left-hand navigation menu item, it reloads a Div with the appropriate content. The issue is that it loops through previous requests, which can be annoying (Try clicking on an ...

javascriptjqueryajax

Numerous Data Tables on a single page with varying parameters

I'm facing a scenario where I have two dataTables on the same page. Referencing this example: https://datatables.net/examples/basic_init/multiple_tables.html Everything seems to be working fine, but both tables share common parameters such as buttons ...

javascriptjquerydatatables

Warning: Potential unhandled promise rejection in React class component

I'm trying to implement a promise inside a class so that depending on whether it resolves or rejects, another method of my component is executed. Below is the code I have: var promise = new Promise((resolve, reject) => { let name = 'DaveA&ap ...

javascriptreactjsreact-nativepromisecallback

Trouble with Vue 3 watch not persisting after page refresh

Attempting to create a Vue application that supports two languages, utilizing local storage and store to store the selected language. Initially, everything appears to be functioning correctly. After the user logs in, the default language is displayed in b ...

javascriptvue.jswatch

Guide on fetching data from a database using Node Js in a hierarchical structure

I am currently developing a NodeJs backend code to retrieve data from the database. The desired structure of the data should look like this: data = [{ name: "Admin", id: '1', children: [ { name: "Admin", id: "1& ...

javascriptnode.jsalgorithmmongoose

What is V8's approach to managing dictionaries?

After attending V8 presentations, it became clear to me that it optimizes constructions such as the one below by tagging a type object: function Point(x, y) { this.x = x; this.y = y; } I am curious about what happens if I were to return an object (JS ...

javascriptv8

Tips for identifying modifications in an input text field and activating the save button

Currently, I am developing a function that can detect any changes made in the text field and then activate the save button accordingly. This code is being executed in Visual Studio 2017, using HTML and JavaScript. (function () { var customer_addres ...

javascriptjqueryhtmljson

problem with displaying sidebar in Ember template

Using Ember, I have a login page where I don't want to display the header or sidebar navigation for my site until the user is authenticated. Once they are logged in, I want the header and sidebar to be visible. Currently, I am achieving this by checki ...

javascriptember.js

Improprove the performance of an array of objects using JavaScript

Hello there, I am currently in the process of creating an array. this.data = [{ label: 'Total', count: details.request.length, }, { label: 'In-Progress', count: details.request.filter((obj) => obj.statusId === 0 || ob ...

javascripttypescriptjavascript-objects

Leveraging TypeScript modules without the need for require()

I created a TypeScript 2.3 app called app.ts that requires the Vue.js library version 2. I manually added the Vue.js script src in the HTML file. All I wanted was to use Vue.js with type checking. I thought I could simply reference it like this: /// & ...

javascripttypescriptrequirejsvue.js

Displaying JSON data using Jquery

I am currently trying to fetch a JSON response and display it in a div ... I have written a script for the same script $('select#mes').on('change',function(){ var valor = $(this).val(); var route = "http://localhost/UJOBB/ ...

javascriptjqueryjson

Optimal strategies for initializing Knockout JS models from backend code

Upon taking over a website that utilizes knockout js and asp.net, I noticed some performance issues during the initial page load. After investigating, I found that there are approximately 20 models on the site, each making an ajax call to retrieve data fro ...

javascriptjqueryasp.netajaxknockout.js

A guide on adjusting the timeout for Azure text to speech silence in JavaScript

Currently, I am utilizing Azure SpeechSDK services to convert speech to text transcription using recognizeOnceAsync. The existing code structure is as follows: var SpeechSDK, recognizer, synthesizer; var speechConfig = SpeechSDK.SpeechConfig.fromSubscripti ...

javascriptazurespeech-to-textazure-cognitive-servicesazure-speech

The property 'matMenuTrigger' cannot be attached to 'a' because it is not recognized

Trying to implement matMenuTrigger but encountering an error saying "Can't bind to 'matMenuTrigger' since it isn't a known property of 'a'". Any assistance would be greatly appreciated. ...

javascriptnpmmean-stackangular8angular9

Having trouble passing an array from PHP to JavaScript

I'm facing an issue with the following code snippet: <?php $result = array(); while ($row = $stmt->fetch(PDO::FETCH_ASSOC)){ $result[] = sprintf("{lat: %s, lng: %s}",$row['lat'],$row['lng']);} ?> <?php $resultAM = joi ...

javascriptphpjson

"Enhance user experience with jQuery's text expansion and collapse

Figuring out how to collapse and expand text with a button click has been challenging for me. I managed to make the text collapse when the button is clicked, but now I also need it to expand back again. The goal is to have the text initially hidden, then e ...

javascriptjqueryhtml

Implementing custom validation in React to dynamically enable/disable buttons

I am working on a basic form that includes 3 input fields and one submit button. The submit button is initially disabled, and each input field has its own custom validation logic using regex. I am looking for a way to enable the button only when all the ...

javascriptreactjsantd

XPath using JScript

I'm a beginner with Selenium and I'm curious about how the value in the text box is loaded when there's no value visible in the HTML tag: <input type="text" name="qty" id="qty" maxlength="5" value="" title="Qty" class="quantity-input qty ...

javascriptseleniumxpath