Efficient method to identify distinct keys within a collection of objects using Typescript

https://i.sstatic.net/qHkff.png

I am currently developing an angular application that includes:

  1. a group of filters
  2. and data records displayed in a table

The columns in the table correspond to the filters, where each filter contains unique values from its corresponding column as options.

In some cases, a column can have more than one value associated with it, meaning multiple options from the corresponding filter.

Whenever a user selects an option from a filter, the table is filtered accordingly, displaying only the records that match the user's selection.

After filtering the records, I need to extract unique values for each filter based on the filtered dataset and find distinct options for each key.

The keys of the Filter objects align with the columns of the Record objects. My goal is to iterate over both the lists of records and filters to identify the unique values for each column key.

Outlined below is the logic I'm using to derive unique filter options from my data:

export function filterOptionsService(records: Record[], filters: RecordFilter[]): RecordFilter[] {
    // Implementation logic here...
}

The part of my code that takes the longest time involves extracting filter options for a specific key from a dataset. It currently runs for 7 seconds when processing 8k records.

const filterOptions = records.reduce((uniqueList, record) => 
                              uniqueList.concat(record[filter.key]), []); 

I've encountered performance issues with this implementation and would appreciate any insights on areas where optimization is needed.

If you'd like to view a sample TypeScript playground code, visit the following link: Click here to access the TypeScript Playground.

Answer №1

It appears that the performance issue you are encountering is related to the fact that Array.prototype.concat() does not alter an existing array but generates a new one instead. While immutability can be beneficial, it may not be necessary for your specific scenario – each created uniqueList array, except the final one, will be discarded. Generating numerous array objects only to discard them immediately can slow down the process, despite JavaScript's speedy object creation.

To address this, consider replacing concat() with a method that modifies the current array, like Array.prototype.push():

Thus, you could switch from

const filterOptions = rows.reduce(
  (uniqueList, row) => uniqueList.concat(row[filter.key]), []
);

to

const filterOptions: string[] = [];
for (let row of rows) filterOptions.push(...row[filter.key]);

In my test simulating the creation of 6000 rows and applying 14 filters (refer to the playground link below), the version using concat() took approximately 7.5 seconds, whereas the push() alternative only took around 38 milliseconds. Hopefully, this ~200x improvement in efficiency translates to your environment and meets your requirements.

Please note that I have omitted any complexities related to "uniquifying" or functional aspects based on your original code snippet. If dealing with unique strings, utilizing object keys or a Set might offer simpler solutions than arrays. Nevertheless, simply swapping concat() with push() should suffice for your situation.

Run code in Playground

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

"Looking for a way to create a new line in my particular situation. Any tips

Here is the code snippet I am working with: let list: Array<string> =[]; page.on('request', request => list.push('>>', request.method(), request.url()+'\\n')); page.on('respon ...

The component prop of Typography in TypeScript does not accept MUI styling

Working with MUI in typescript and attempting to utilize styled from MUI. Encountering an error when passing the component prop to the styled component. The typescript sandbox below displays the issue - any suggestions for a workaround? https://codesandbo ...

How to Show Concealed Text in Material UI Multiline TextField and Obtain Unveiled Text

I am currently using the Material UI TextField component to create a multiline input for messages. My aim is to display a masked version of the text in the GUI while retaining the unmasked text value for processing purposes. Below is the code snippet for ...

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Im currently working on developing a unique custom validator for the datepicker feature within a reactive form group. Within my code file, specifically the .ts file: form: FormGroup; constructor( private fb: FormBuilder, ...

How to Retrieve the Number of Requests in an Express Application

Is there a method to retrieve the overall count of requests in a specific route using Expressjs? ...

Converting a curl command to a $.ajax() call in JavaScript: A step-by-step guide

I'm attempting to retrieve data from the Zomato API by using jquery ajax, however, they have provided a curl command instead. curl -X GET --header "Accept: application/json" --header "user-key: key" "https://developers.zomato.com/api/v2.1/cities" Is ...

Exploring the TLS configuration for a Node.js FTP server project: ftp-srv package

I'm seeking to comprehend the accurate setup of TLS for my FTP project (typescript, nodejs) using this API: ftp-srv The documentation provided is quite basic. In one of the related github issues of the project, the author references his source code / ...

I am interested in organizing a three-dimensional array using JavaScript

Just the other day, I posted a question on PHP, but now I need similar help for JavaScript. Here is my array : var inboxMessages = { 105775: { 0: { 'id': 85, 'thread_id': 105775, ' ...

Clicking on an element- how can I find the nearest element?

Encountering an issue with my next js app where I am attempting to assign a class to an element upon clicking a button. The problem arises when trying to access the next div using the following code snippet: console.log(e.target.closest('.request_quot ...

Creating Algorithms for Generic Interfaces in TypeScript to Make them Compatible with Derived Generic Classes

Consider the (simplified) code: interface GenericInterface<T> { value: T } function genericIdentity<T>(instance : GenericInterface<T>) : GenericInterface<T> { return instance; } class GenericImplementingClass<T> implemen ...

Displaying a pop-up message using JavaScript: How to trigger it with jQuery

Within my application, I have successfully implemented a basic JavaScript popup by invoking it in this manner- <a href="javascript:popup('Hello World')>Click Me</a> I am curious if it is feasible to trigger the same popup using othe ...

The JSON GET method displays HTML content when accessed through code or console, but presents a JSON object when accessed through a web address

I am currently trying to execute the following code: $(document).ready(function () { $.ajax({ url: 'http://foodfetch.us/OrderApi/locations', type: 'GET', success: function(data){ alert(data); ...

What could be causing the absence of the exported Object when importing into a different Typescript project?

I am currently in the process of developing a React component library using Typescript that I want to import into another Typescript project. Specifically, I want to import an Analytics chart library into a storybook for demonstration and testing purposes. ...

transferring data from JavaScript to AJAX in MVC4

I am facing an issue where I need to select a value from a grid and pass it to ajax, but I keep getting an error saying "Id undefined". Can anyone help me find a solution for this problem? The goal is to delete records that are presented in the grid. Upon ...

Ways to simultaneously install numerous gulp packages using node-package-manager

Recently, I made the transition to using the gulp task runner for automating my workflow. However, whenever I start a new project, I find myself having to install all the required packages listed in the gulpfile.js by running the following command: npm in ...

Show alerts that automatically disappear after a set amount of time

I have successfully implemented code that displays alerts for a specific period of time, indicated by (alert alert-warning). Additionally, I want to display another type of alert, (alert alert-success), for a certain amount of time, after which the page sh ...

Executing a JavaScript function with a parameter in an NPM script

Trying to execute a function by invoking an npm script with an extra parameter to specify a file path. A simplified version of the setup is shown below: package.json "reset_script": "node -e 'require(\"./script_reset_db\& ...

Avoiding model updates when cancelling in angular-xeditable

I am utilizing angular-xeditable. When changing the value of "editable-text" and pressing the Cancel button, the "editable-text" value should revert back to its previous one. In other words, "editable-text" keeps updating the model even if the Cancel butto ...

Using Ajax to update a MySQL database with an array from jQuery

I need some assistance in updating a MySQL table using data from a jQuery array through AJAX. I've tried searching for similar issues without any luck, possibly due to my lack of familiarity with the correct terms in web development and coding. Allow ...

A result of the array's elements' index will form an object

Here is a straightforward example for you to work with. I am trying to retrieve the index of each Test component. However, the key value is returning an object. Since I'm not very well-versed in Reactjs, could someone guide me on how to get the index ...