organizing strings in alphabetical order using TypeScript

My md-collection is set up to display a list of emails like this:

<md-collection-item repeat.for="u of user" class="accent-text">
                            <div class="row">
                                <div class="col">
                                    <p>${findEmailAddress(u.email)}</p>
                                </div>          
                            </div>
                        </md-collection-item>

In TypeScript, the findEmailAddress function looks like this:

findEmailAddress(userId: string) {
         return ((this.Persons|| []).find(x => x.userId == userId) || {}).email;
    
    }

The emails are displayed in the format:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e2e3b3f3d363b2d1e2a3b2d2a703d3133">[email protected]</a>
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="076677776b6247736274732964686a">[email protected]</a>
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="27574e49424657574b4267534254530944484a">[email protected]</a>
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a282b242b242b0a3e2f393e64292527">[email protected]</a>

I want to sort the emails alphabetically like this:

<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="15746565797055617066613b767a78">[email protected]</a>
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bedcdfd0dfd0dffecadbcdca90ddd1d3">[email protected]</a>
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e6968387858e8395a692839592c885898b">[email protected]</a>
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0c7c6562696d7c7c60694c78697f78226f6361">[email protected]</a>

I attempted using the sort method like this:

let test =((this.Persons|| []).find(x => x.userId == userId) || {}).email;
 return test.sort() ---> but it fails on sort and says "sort does not exists on type string"
javascripttypescriptaureliaalphabetical

Answer №1

The Array#find method is used to return the first element in an array that satisfies a specified condition.

For example, in your code snippet:

let emailAddress = ((this.Users || []).find(user => user.userId == userId) || {}).email;

The emailAddress variable will be of type string, not an array. This may explain why you're encountering the current error message.

If you want to display sorted email addresses, you should sort the data source array Users.

Assuming that Users is an array, you can sort it based on the email property.

const sortedUsers = Users.sort((a, b) => a.email - b.email)

<md-collection-item repeat.for="user of sortedUsers" class="accent-text">

Answer №2

Your test example is returning a string instead of an array. To use the sort function, it must be called on an array of strings.

To convert the string to an array, you can split it based on line breaks if your test contains a list of email addresses separated by line breaks:

test.split("\n").sort();

For more information on the sort method in JavaScript, you can visit this link.

If you want to learn more about splitting strings in JavaScript, check out this resource.

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

Storing Byte Array in a File using JavaScript

I am working on a Java REST webservice that returns documents as byte array. I am trying to write JavaScript code that will retrieve the response from the webservice and save it to a file for downloading as a PDF. However, when testing my sample code, the ...

javascriptarraysrestdownloadxmlhttprequest

Recoil: Executing a function when an atom is modified

My goal is to store a user object in an atom and cache it in localStorage every time it changes to avoid having the user sign in repeatedly if the app crashes: localStorage.setItem('user', JSON.stringify(user)) Previously, with useContext, I ach ...

javascriptreactjsnext.jsrecoiljs

`Automatic toggling between two inputs with adjustable settings`

There are 2 input fields in my code that only accept positive floats with 2 decimals. Any other characters entered should be automatically removed using the change() function. Whenever the value of one input is changed, the value of the other input should ...

javascriptangularjsinput

What initiates Electron after npm processes the package.json file?

As I delve into the realms of JavaScript, HTML, and Electron, a particular question has been playing on my mind - what exactly happens when you run electron . in the "scripts" -> "start" section of package.json? The mysterious way it operates sends shiv ...

javascriptnode.jsnpmelectron

Refresh the webpage when using the browser's back or forward button in AngularJS with ui-router

In my AngularJS app, I have configured the ui-router state as follows: $locationProvider.html5Mode(true); $stateProvider .state('index', { url: '/index?zoom&center', views: { ...

javascriptangularjsangular-ui-routerhtml5-history

"Error: Cannot iterate over items in React using Item.map, as

I am currently working on implementing a function to handle changes in the names of individuals within an array stored in state as personState. const [personState, setPersonState] = useState([ { id:'asdasd', name: "Max", age ...

javascriptreactjs

What is the best way to include a new class into the current class in this particular scenario?

Just starting out with Javascript and Jquery, so please bear with me if this question seems basic I'm dynamically constructing HTML like this: var favoriteresultag = '<ul>'; favoriteresultag += "<section id='"+name+"' ...

javascriptjquery

Navigate through a filtered list of parent items with the use of cursor arrows in AngularJS

My form contains an input with a dropdown, where I display JSON data like this: { "title": "Parent #1", "child" : [ {"title": "Child ##1"}, {"title": "Child ##2"}, {"title": "Child ##3"}, {"title": "Child ##4"} ...

javascripthtmlangularjs

Retrieving the result of a callback function within a nested function

I'm struggling with a function that needs to return a value. The value is located inside a callback function within the downloadOrders function. The problem I'm encountering is that "go" (logged in the post request) appears before "close" (logged ...

javascriptnode.jsasynchronouscallbackasync-await

Bizarre issue encountered while attempting to upgrade a program to Vue2

Upon running vue-migration-helper and updating everything, I encountered the error below. vue2.default.user is not a function Console error: Uncaught TypeError: _vue2.default.use is not a function at eval (eval at <anonymous> (app.js:1624), & ...

javascriptlaravel-5vue.jsvuejs2laravel-elixir

How to pass the Exact property in React MaterialUI Button with RouterLink Component?

I came across this code snippet: <Button activeClassName={classes.active} className={classes.button} component={RouterLink} exact={true} to="/app/certificates" > Certificates </Button> <Button activeClassName={classe ...

javascriptreactjsreact-routermaterial-ui

Activate Bootstrap modal using an anchor tag that links to a valid external URL as a fallback option

To ensure accessibility for users who may have javascript disabled, we follow a company standard of developing our web pages accordingly. Our target demographic still includes those familiar with VCRs blinking 12:00. One particular challenge involves a te ...

javascriptjqueryhtmlbootstrap-4bootstrap-modal

Why should TypeScript interfaces be utilized in Angular services for defining type information?

What are the benefits of creating an interface for an Angular service as opposed to simply exporting the service class and using that for type information? For example: class Dashboard { constructor(ui: IUiService){} } vs class Dashboard { cons ...

angularjstypescript

Jquery not functioning properly for show and hide feature

I'm new to using Jquery and JqueryUI. I have a div named front, which I want to initially display on window load and then hide it by sliding after a delay of 5500 milliseconds. However, I'm encountering errors in the jquery.min.js file. The HTML ...

javascriptjqueryhtmlcssjquery-ui

Tips for choosing a loaded element using the jQuery load() method

I am currently facing a challenge with the following (here is a snippet of code to illustrate): <div id="container"></div> <script type="text/javascript"> $('#container').load('content.html'); $('.eleme ...

javascriptjqueryajaxasynchronous

The function replace does not exist in t(…)trim

I encountered an error in my code that breaks the functionality when checked using console.log. var map = L.map('map').setView([0, 0], 2); <?php $classesForCountries = []; if (have_posts()) : while (have_posts()) : the_post(); ...

javascriptphpjqueryjsonleaflet

Is it possible to leverage ES6 modules within a Node.js application while also debugging it using Visual Studio?

Trying to create a basic node.js module test project using ES6 in Visual Studio 2015 has resulted in build errors, preventing me from running or debugging the application. Could it be that I arrived at the party too soon? I attempted opening and building ...

node.jsvisual-studiotypescriptecmascript-6

Ajax fails to function within a loop

I'm looking to implement Ajax in a loop to retrieve data sequentially. This is what I have in my JavaScript function: var resultType = $("input[name='resultType']:checked").val(); var finalResult = ""; var loadingMessage = "<img src=&ap ...

phpjavascripthtmlajaxrequest

Sending empty parameter data via Ajax to an MVC controller

Initially, I had no issues passing a single parameter to my MVC Controller through Ajax. However, when I attempted to add an extra parameter, both parameters stopped sending data to the Controller. Can anyone help with this issue? Thank you! Ajax Code: ...

javascriptc#jqueryajaxasp.net-mvc

"Discover the process of transforming HTML, CSS, and script files into a cohesive JavaScript format

I have developed a unique web chat widget from scratch using HTML, CSS, JavaScript, and AJAX calls. Now, my goal is to convert it into a script that can be easily embedded in any other websites or webpages. Similar to how third-party widgets work, users sh ...

javascript