ordering an array based on a boolean property in TypeScript

I'm currently working with angular 10 and I need help figuring out how to sort this array:

var dic = [
  { state: false, id: 1 },
  { state: true, id: 2} ,
  { state: false, id: 3 },
  { state: true, id: 4 },
  { state: false, id: 5 }
]

My goal is to order the array based on the boolean value of state, like this:

[
  { state: true, id: 2 },
  { state: true, id: 4 },
  { state: false, id: 1 },
  { state: false, id: 3 },
  { state: false, id: 5 }
]

I want the true values to come before the false values in the sorted array.

Could someone advise me on which property or feature in TypeScript can help me achieve this?

Thank you for your assistance!

javascriptarraystypescriptsorting

Answer №1

To achieve this task, you can utilize the Array#sort method and convert the boolean values within the state property:

Number(true) //1
Number(false) //0


const dic = [
  { state: false, id: 1 },
  { state: true, id: 2 },
  { state: false, id: 3 },
  { state: true, id: 4 },
  { state: false, id: 5 }
];

dic.sort(({ state: stateA = false }, { state: stateB = false }) =>
  Number(stateB) - Number(stateA)
);

console.log(dic);

Answer №2

To simplify this, you can use the following code snippet.

dic.sort((a, b) => b.status - a.status);

Explanation:

It is common knowledge that:

false // 0
true // 1

Therefore,

false - true // -1
true - false // 1
true - true // 0
false - false // 0

Example

const dic = [
  { status: false, id: 1 },
  { status: true, id: 2 },
  { status: false, id: 3 },
  { status: true, id: 4 },
  { status: false, id: 5 }
];

dic.sort((a, b) => b.status - a.status);

console.log(dic);

Answer №3

To organize by state, convert the boolean values to integers of 1 or 0 using double-bang (!!) or double-tilde (~~). If the outcome is 0, then proceed with sorting based on the id values.

const dic = [
  { state: false  , id: 1 },
  { state: true   , id: 2 },
  { state: false  , id: 3 },
  { state: true   , id: 4 },
  { state: false  , id: 5 }
];

dic.sort(({ state: stateA, id: idA }, { state: stateB, id: idB }) =>
  (!!stateB - !!stateA) || (idA - idB));

console.log(dic);
.as-console-wrapper { top: 0; max-height: 100% !important; }

Alternatively:

(~~stateB - ~~stateA) || (idA - idB)

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

Enhancing Angular Material: requiring more user engagement for rendering to occur

Encountering an unusual issue with Angular Material: certain components require an additional event, like a click or mouse movement on the targeted div, to trigger the actual rendering process. For instance, when loading new rows in mat-table, some empty ...

angulartypescriptangular-material

I am unable to input just one numerical value into my function

I am encountering an issue with my function that calls another function. The problem arises when inputting single numbers in the prompt; I have to append a letter like (a1, a2, a3) for it to function correctly. The function "PrintSelectedToPDF" works smoo ...

javascriptgoogle-apps-scriptspreadsheet

A guide to setting up checkbox input in Vue 3 so that it toggles between checked and unchecked states when an

I'm in the process of creating a div container that will contain both an image and a checkbox input element. The checkbox input has a click handler that passes a value to a function, as well as a :value binding which sends the value to an array named ...

javascriptvue.jscheckboxvuejs3v-model

Steps to specify a prefix for declaring a string data type:

Can we define a string type that must start with a specific prefix? For instance, like this: type Path = 'site/' + string; let path1: Path = 'site/index'; // Valid let path2: Path = 'app/index'; // Invalid ...

typescript

Dynamic rule addition with JQuery Validation

I am searching for a method to dynamically incorporate the jQuery validation rules, as they are needed in various locations. For instance, a user can edit news in two different ways. The first method involves using a standard form with jQuery validation, ...

javascriptjqueryjquery-validate

Upon upgrading to webpack 5.x, I encountered the error message `Error: getaddrinfo ENOTFOUND localhost:8081` when trying to run `npm run serve`. What could be causing

Recently, I was tasked with upgrading a Vue project from webpack 4.x to webpack 5.x. Prior to the upgrade, my vue.config.js file looked like this: devServer: { port: 8081, public: process.env.PUBLIC_ADDRESS, }, The variable PUBLIC_ADDRESS was defined ...

javascriptnode.jsvue.jswebpack

What steps should be taken to ensure that Google effectively crawls through an AngularJS application?

According to a source at Allotment Digital, it is unnecessary to provide different or pre-rendered content to Google when using html5mode and removing hashtags from URLs. While some websites state that ajax crawling documents are deprecated, others such a ...

javascriptangularjsseogoogle-crawlers

What are the steps to downloading a server-generated image with user data from the client using Express?

I am facing a challenge with downloading a server-generated image immediately after it is created. My current approach involves using fetch to send user input data (bypassing HTML forms). Although the image is successfully generated on the server, I am str ...

javascriptnode.jsexpressfetch

Place a new button at the bottom of the react-bootstrap-typeahead dropdown menu for additional functionality

Currently, I have successfully implemented the React Bootstrap Typeahead with the desired options which is a good start. Now, my next challenge is to integrate a custom button at the end of the dropdown list for performing a specific action that is not ne ...

javascriptreactjstypescriptreact-bootstrap-typeahead

What is the best way to adjust the textfield's size proportionally to its parent accordion when the window is resized?

Inside an accordion, I placed a text field with specific widths and heights. However, when I resize the browser window, the accordion width changes proportionally to the window size while the text field width remains the same. This causes the text field to ...

cssreactjstypescriptmaterial-ui

Transforming Ember's ajax query string

Using ember-model, I am making a request like this: App.Video.find({'sort':'createdAt+asc'}); to retrieve a sorted list of videos. This should result in the following request: http://localhost:1337/api/v1/videos?sort=createdAt+asc How ...

javascriptajaxember.jsember-dataember-model

How can I showcase the captured image on Ionic 2?

I am having trouble displaying the selected or captured image on the page after uploading it through two methods - one using the gallery and the other using the camera. ** Here is my code ** 1) profile.html: <img class="profile-picture" src="{{baseUr ...

androidangulartypescriptionic-frameworkionic2

Securing routes in Angular without relying on LocalStorage or Cookies by implementing an Auth Guard

Currently, I am working on implementing an authentication guard in Angular. Instead of the conventional method of checking local storage or cookies to verify user authentication, I am utilizing API endpoints that respond with 200 OK if a httponly cookie co ...

angulartypescript

"Enhance Your Website with a Sticky Bootstrap Navbar and Seamless Scroll Design - Elevating Padding and Margin-

I am currently working on incorporating a bootstrap sticky navbar with a fixed height of 81px and smooth-scroll behavior into my project. The website's HTML structure includes section tags like <section class="section" id="news" ...

javascriptcsstwitter-bootstrapbootstrap-4smooth-scrolling

Change the height of a div after submitting a form using Django (Python)

I have a registration form with one submit button. Upon clicking submit, if there is an error, the height of the div increases by setting it to height:auto. However, when I click submit, it changes the height of the div (.continer). Strangely, after one ...

javascriptpythonhtmlcssdjango

Modifying the background hues in React using the useState hook

Hello there, I'm in need of some clarification on the following code snippet. I've come across a piece of code that I can't quite grasp, even though it was recommended to me. To style text colors based on checkbox status, I came up with thi ...

javascriptreactjsbackgroundstylesconditional-operator

Steps to activate internet access on the Samsung Gear S2

When I press a toggle on a web application for the gear s2 (javascript), I send out an http request: ( function () { var led001Button = document.getElementById("Led001"), led002Button = document.getElementById("Led002"); function http ...

javascripthttprequesttizentizen-wearable-sdktizen-web-app

Please provide TypeScript code for a React wrapper function that augments a component's props with two additional functions

During the course of my project, I implemented a function wrapping React component to incorporate undo/redo functionality using keyboard shortcuts Ctrl+Z and Shift+Ctrl+Z. Here is an example: import React from 'react'; interface WithUndoRedoProp ...

javascriptreactjstypescript

The logs of both the frontend and backend display an array of numbers, but surprisingly, this data is not stored in the database

I am attempting to recreate the Backup Codes feature of Google by generating four random 8-digit numbers. for(let i = 0; i < 4; i++) { let backendCode = Math.floor(Math.random() * (99999999 - 10000000 + 1) + 10000000); backendCodes.push(back ...

javascriptangularmongoosemongoose-schema

Issues with compiling arise post downloading the latest Angular 2 quickstart files

My Angular 2 project was running smoothly on version 2.3, but I decided to upgrade to version 2.4. To do so, I downloaded the latest quickstart files from https://github.com/angular/quickstart After replacing my tsconfig.json, package.json, and systemjs.c ...

angulartypescript