Arrange the list by first names in the array using Ionic 3

What is the process for arranging a list by firstName from an array?

This is my code in my.ts file:

initializeItems(){
    this.items = [
      { avatar: '../../assets/imgs/profile1.jpg', firstName:'Sterlian', lastName:'Victorian',  date:new Date().toLocaleDateString(), chat:'Life is beautiful...', component: TetherPage },
      { avatar: '../../assets/imgs/profile2.jpg', firstName:'Alexis', lastName:' Fournier ', date:'Yesterday', chat:'If you are going to use a passage...', component: TetherPage },
      { avatar: '../../assets/imgs/profile3.jpg', firstName:'Alma', lastName:'  Henry ', date:'10/1/2019', chat:'There are many variations of pass', component: TetherPage },
      { avatar: '../../assets/imgs/profile4.jpg', firstName:'Clara', lastName:' Damian ', date:'Today', chat:'nice to see you after log time ', component: TetherPage },
      { avatar: '../../assets/imgs/profile5.jpg', firstName:'James', lastName:' Charlie ', date:'Yesterday', chat:'Hi!..Have a nice day', component: TetherPage },
      { avatar: '../../assets/imgs/profile6.jpg', firstName:'Ellen', lastName:' Rhystem ', date:'2/1/2019', chat:'It is long establish fact...', component: TetherPage },
      { avatar: '../../assets/imgs/profile7.jpg', firstName:'Irene', lastName:' Reeceem ', date: new Date().toLocaleDateString(), chat:'I think we can all do with a bit more spark', component: TetherPage },
      { avatar: '../../assets/imgs/profile8.jpg', firstName:'Thomas', lastName:' Joe ', date:'Yesterday', chat:'you’re fired up ready to have the best day ever…', component: TetherPage },
      { avatar: '../../assets/imgs/profile9.jpg', firstName:'Charlie', lastName:' Kyle ', date:'3:45 am', chat:'Create the highest, grandest vision possible for your life, because you become what you believe', component: TetherPage },
      { avatar: '../../assets/imgs/profile10.jpg', firstName:'Jacob', lastName:' Henry ', date: new Date().toLocaleDateString(), chat:'Wherever life plants you, bloom with grace', component: TetherPage },
      { avatar: '../../assets/imgs/profile11.jpg', firstName:'Harry', lastName:' Callum ', date:'1/2/2019', chat:'One at a time. Just let your pile of good things grow', component: TetherPage },
      { avatar: '../../assets/imgs/profile12.jpg', firstName:'Oliver', lastName:' Jake ', date: new Date().toLocaleDateString(), chat:'Little by little, day by day, what is mean for you WILL find its way”', component: TetherPage },
      { avatar: '../../assets/imgs/profile13.jpg', firstName:'Jack', lastName:' Connor ', date:'Yesterday', chat:'Learn from yesterday, live for today, hope for tomorrow', component: TetherPage },
      { avatar: '../../assets/imgs/profile14.jpg', firstName:'Julia', lastName:' Margaret ', date: new Date().toLocaleDateString(), chat:'Take time to do what makes your soul happy', component: TetherPage },
      { avatar: '../../assets/imgs/profile15.jpg', firstName:'Jack', lastName:' Tracy ', date:'Today', chat:'Be so happy that when others look at you, they become happy too', component: TetherPage }
    ];
    this.modifiedData = JSON.parse(JSON.stringify(this.items));

}
javascripttypescriptionic3

Answer №1

To achieve the desired outcome, you can follow this example:

let data = [ {  title:'Inception', director:'Christopher Nolan', rating:9.3 }, {  title:'The Dark Knight', director:'Christopher Nolan', rating:9.0 }, {  title:'Interstellar', director:'Christopher Nolan', rating:8.6 } ];

data = sortByKey(data, 'rating');

function sortByKey(array, key) {
 return array.sort(function(a, b) {
    var x = a[key];
    var y = b[key];
    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
 });
}

Answer №2

To organize the list, you can utilize Array.sort in combination with a personalized function for comparison that employs String.localCompare:

const sorted = items.sort((a, b) => a.firstName.localeCompare(b.firstName));

For further details, refer to the MDN documentation on Array.sort and String.localCompare.

const TetherPage = {};
// Rest of the code block remains unchanged
console.log(sorted);

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

Continuously replicate SVG horizontally without limit

In search of the perfect visual effect, I am eager to develop an infinite animation featuring a car moving horizontally with various landscape layers passing by in SVG format. Struggling to find a way to seamlessly repeat my SVG landscape layers along the ...

javascriptcsssvg

Shader customization and dynamic window resizing with Three.js

Having trouble with resizing the Three.js shader scene using ThreeX to handle window resizing and changing orientation on mobile devices. When the window width is decreased, everything works perfectly. However, expanding the window either in width or heigh ...

javascriptthree.jswindow-resize

Module Ionic not found

When I attempt to run the command "ionic info", an error is displayed: [ERROR] Error loading @ionic/react package.json: Error: Cannot find module '@ionic/react/package' Below is the output of my ionic info: C:\Users\MyPC>ionic i ...

javascriptreactjsionic-frameworknpm

Javascript Library Issue: "Implicitly Declared Type 'Any' Error"

I am currently in the process of developing a JavaScript library that will interact with an API. My goal is to create a module that can be easily published on npm and utilized across various frameworks such as Angular or React. Below is the code snippet fo ...

javascriptreactjsangulartypescriptnpm

How can a personalized greeting be added in Node.js to welcome a user by their first name retrieved from a MongoDB database upon logging in?

I am looking to create a login and signup form using React that will allow users to input their name, email, and password. After submission, I want the next page to be a personalized congratulations page with the user's name dynamically inserted. Can ...

javascriptnode.jsreactjsmongodb

Converting RSS title to HTML format with the help of JavaScript

I am currently working on populating a menu on a webpage with the 5 latest topics from our site's RSS newsfeed using JavaScript (specifically jQuery version 1.9.1). I have been searching for a solution, but most answers I find reference deprecated scr ...

javascriptjqueryhtmlxmlrss

What is the best way to make a div pull its background image directly from the internet instead of using the cached version?

Running relevant Javascript every fifteen minutes to fetch the appropriate image from the internet: document.getElementById('weatherbug').style.background = "url('http://tinyurl.com/jwltx5s') repeat scroll -1px -24px transparent"; The ...

javascripthtml

Utilize data from a dynamically loaded component within a parent component in Vue.js

In my Vuejs application, I've implemented a wizard-type flow with dynamically loaded components. The parent component contains the Save button, while the child components have all the text fields. Upon clicking the Save button, I need to achieve two m ...

javascriptvue.jsvuejs2vue-component

Creating a unique AngularJS custom directive that utilizes ng-options can be achieved by populating

I've encountered a major roadblock in my project, and despite my efforts to troubleshoot, I can't seem to find the solution. The issue revolves around populating options within an ng-options directive through a service. This directive is nested i ...

javascriptangularjsangularjs-directiveng-optionsangularjs-ng-options

Include a Class into a label using jQuery

I am having an issue where I need to specifically add the error class to a <label> with the name attribute set to choice_16_0. However, when I try to achieve this using my code, it ends up changing all labels on the page to <label for="choice_16_0 ...

javascriptjqueryjquery-selectors

Toggle a Vue.js method to display responses for a particular question

Currently, I am in the process of developing a simple toggle feature for a FAQ section. The idea is that when a user clicks on an icon associated with a specific question, only that question's answer should be displayed. Although the function is oper ...

javascriptvue.jsvuejs2vue-componentnuxt.js

Seeking materials for WebDriverJs?

It has come to my attention that there are some valuable resources available: http://docs.seleniumhq.org/docs/03_webdriver.jsp https://code.google.com/p/selenium/wiki/WebDriverJs However, I am curious if there exists a comprehensive website that prese ...

javascriptnode.jsseleniumwebdriverselenium-webdriver

Ways to employ data binding for extracting a user-input value and performing multiplication operations with the enclosed {{ ...}} tags

My API response includes the price of a product, which is represented as {{price}} I have a system where I can add or reduce the number of products: <div class="number-input"> <h2>Price: {{price }}</h2> <button oncli ...

javascriptangulartypescriptdata-binding

Adding QML code into a Jade file

Currently working on developing a straightforward video streaming application using Node.js and integrating the WebChimera plugin. The player configuration is done in QML with Chimera, and I am facing numerous errors during the compilation process in Jade. ...

javascriptnode.jsexpressqmlpug

Steps to incorporate / insert Angular directive in an application

In my app, the main.js file is located in the root folder. -app |_ routes.js |_ main.js -components |_directives |_abc-directive.js I am trying to figure out how to define a directive that can be accessed from a different folder. This is what I at ...

javascriptangularjs

React Native, state values are stagnant

I created an edit screen where I am attempting to update the post value through navigation v4 using getParams and setParams. However, when I modify the old value and click the save button, it does not update and no error is displayed. The old values still ...

javascriptreactjsreact-native

Ways to organize an array based on various characteristics

I am seeking assistance regarding grouping in Javascript. Below is an array where each item has either is_sweet, is_spicy, or is_bitter set to true: const foodsData = [{ name: 'mie aceh', is_sweet: false, is_spicy: true, ...

javascriptarraysfunctional-programminggroupinglodash

Access the value of a JSON property, return null if the key is not found, all in one line of JavaScript code

How about a fun analogy in Python: fruits_dict = {"banana": 4, "apple": 3} num_apples = fruits_dict.get("apple", None) num_oranges = fruits_dict.get("orange", None) print(num_apples, num_oranges) The result would be: 3 None If we switch gears to Jav ...

javascriptpythonjson

Input values that are true, or in other words, fulfill conditions for truthiness

Is there a specific data type in TypeScript to represent truthy values? Here's the method I'm working with: Object.keys(lck.lockholders).length; enqueue(k: any, obj?: any): void It seems like TypeScript allows checking for empty strings &ap ...

typescripttsctruthy

In React, the clearInterval() function does not effectively clear intervals

Currently, I am implementing the following code: startInterval = () => { this.interval = setInterval(this.intervalFunction, 10000) } stopInterval = () => { clearInterval(this.interval) } However, a problem arises when I invoke the stopInte ...

javascriptreactjsnext.js