Filtering a table with a customized set of strings and their specific order using pure JavaScript

Recently, I've been diving into APIs and managed to create a table using pure vanilla javascript along with a long list of sorting commands that can filter the table based on strings.

My goal is to establish an object containing strings in a specific order for filtering purposes. For instance, let's say we're dealing with "rarity" in a video game. By using this filter, I envision creating a sorting function that will organize the content in the table according to the specified filter sequence.

The desired order would be: Common > Uncommon > Rare > Epic > Legendary

To achieve this, it seems like you would provide the function with the key to compare among each "item" in the dataset.

let filter = {
  "COMMON",
  "UNCOMMON",
  "RARE",
  "EPIC",
  "LEGENDARY"
}

What approach do you suggest for solving this challenge?

Answer №1

To organize the Array in ascending order, you can use the following code snippet. I hope you find it useful.

dataArray.sort((a, b) => filter.indexOf(a.dataKey) - filter.indexOf(b.dataKey))

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

Sending a JSON POST request through the Terminal to a PHP file results in a syntax error

First Try: curl -X POST -H "Content-Type:application/json" -H "Accept:applica tion/json" http://localhost/test.php -d '{"helloworld: "Hello" } Second Attempt: curl -X POST -H "Content-Type: application/json" -d '{"username":"xyz","password":"x ...

Encountering a RangeError when transmitting OpenLayers3 event via AJAX

An error is appearing in the chrome console stating: RangeError: Maximum call stack size exceeded The code I am using is as follows: draw.on('drawend', function(evt) { var fe = evt.feature console.log(fe); ...

Converting data from limited CSV column sets into rows that conform to a designated JSON structure

In my possession, there is a CSV file with a unique format as shown below: name subname value1 value2 a a 1 21 a a 2 22 a a 3 23 a a 4 24 b a 5 25 b ...

Methods for extracting the date value from a Material UI datepicker?

As a newcomer to React, I am currently working on creating a form that includes a Date picker for scheduling appointments. Since booking appointments in the past is not allowed, I need to disable the days before today in the calendar for the date picker. ...

Retrieve the quantity of files in a specific directory by implementing AJAX within a chrome extension

I need assistance with obtaining the count of images in a specific directory using JS and AJAX within my chrome extension. My current code is included below, but it does not seem to be functioning as expected since the alert is not displaying. main.js .. ...

Why does my ngFor consistently refresh while the array remains unchanged?

Issue at hand: Whenever I launch this component, the ngFor div continuously updates and causes my RAM to deplete. Typically, ngFor is triggered when the array is updated; however, in my case, the array (announcements) only updates once in the constructor. ...

Jackson refuses to name fields according to my preferences

Similar Issue: Handling JSON Property Names During Serialization and Deserialization On my website, I am utilizing Jackson library to generate an options string for a charting tool that requires JSON input. For instance, I have a public class Chart ...

Vue: Simple ways to retrieve state data in MutationAction

I'm having trouble accessing the state inside @MutationAction Here is the setup I am using: Nuxt.js v2.13.3 "vuex-module-decorators": "^0.17.0" import { Module, VuexModule, MutationAction } from 'vuex-module-decorators' ...

Capture user input to extract data from a JavaScript object

I need help with implementing a search function where users can enter a name and the person's extension will be displayed on the UI either by clicking a button or pressing "return". Any ideas on how to make this feature work seamlessly? UI <html ...

Is there a way to incorporate an 'input' type within an Icon Button component from Material UI in a React project?

Kindly review my code below. I have revamped it for clarity so you won't need to stress about important details! const test = () => { return ( <label > <input type='file' multiple style={{ display: &ap ...

What steps should one take to address issues related to Datatables in Laravel and Vue?

I encountered an issue while trying to fetch data into a datatable in Laravel. I am receiving an error message stating "Uncaught ReferenceError: $ is not defined" on the console of the page. Is there a solution to resolve this problem? index.blade.php ...

The message sent from the server via SocketIO seems to be malfunctioning

Currently, I am in the process of developing an application that utilizes websockets for facilitating server-client communication. The main idea behind this concept is to enable the client to request messages from the server, while also allowing the server ...

django request involving two date fields

Attempting to make a request with a filter on a combination of a date and an integer representing a year has proven to be quite challenging for me. Below is my model : class Exemple(models.Model): date_field = models.DateField() year_field = mode ...

Using ReactJS and Redux to dispatch notifications

I have a query regarding displaying notifications for successful or failed user registration actions. Utilizing Redux, I've implemented the following action page: export function registerUserFail(error){ return { type:REGISTER_USER_FAIL, ...

When developing a node.js project using VMWare's shared folder, how can you manage the node_modules folder?

My current project needs to run on Linux, but I am using a Windows computer. This means I have to use a VM. Despite wanting to use WebStorm, I am avoiding JB Gateway due to its numerous bugs. My solution was to utilize the VMWare share folder function. Ho ...

This marks my initial attempt at developing an Angular project using Git Bash, and the outcome is quite remarkable

I have a project named a4app that I am trying to create, but it seems to be taking around 10 minutes to finish and is showing errors. The messages displayed are quite odd, and I suspect there may be an issue with the setup. I have not yet used the app that ...

Find the names of keys which have a value of true in reactjs

Greetings, I have a JSON file that contains information about different components. I am trying to extract only the Dashboard and Datatable sections where the "visible" attribute is set to true. { "MTs": { "Dashboard": { "id": 1, "visible ...

Determine the elapsed time in seconds between two specified moments

I am trying to implement two input fields in my HTML, one for a starting point and another for an end point. The user will enter two times like this: For example: [8:15] - [14:30] alert("XXXXX seconds") I want to calculate the number of seconds between 8 ...

Changing the i18n locale in the URL and navigating through nested routes

Seeking assistance to navigate through the complexities of Vue Router configurations! I've dedicated several days to integrating various resources, but have yet to achieve successful internalization implementation with URL routes in my unique setup. ...

Having trouble inputting text into the text area using Selenium WebDriver with C#

Here is the original code snippet: I am having trouble entering text in the text box below. Can you please help me figure out how to enter text in this text box? <td id="ctl00_cRight_ucSMS_redSMSBodyCenter" class="reContentCell" ...