How can you retrieve the property value from an object stored in a Set?

Consider this scenario: SomeItem represents the model for an object (which could be modeled as an interface in Typescript or as an imaginary item with the form of SomeItem in untyped land).

Let's say we have a Set:

mySet = new Set([{item: SomeItem, selected: true}, ...])
.

Now, suppose we want to determine whether itemA: SomeItem is selected within the set.

What would be the most efficient way to accomplish this task?

The following attempts did not yield the desired result:

const isSelected = mySet.has({item: itemA, selected: true});

And neither did this:

const isSelected = Array.from(mySet).includes({item: itemA, selected: true});

This lack of success can be attributed to the fact that these approaches attempt to compare objects by reference rather than by value.

However, the following method does provide the expected outcome:

let isSelected: boolean;
mySet.forEach(state => {
  if (state.item === itemA) {
    isSelected = state.selected;
  }
});

Despite its effectiveness, I can't help but feel that there may be a more appropriate solution.

Therefore, How can I retrieve the value of a specific property from an object within a Set?

Answer №1

When comparing two objects with the same properties, it is important to note that they will only return true if they have the same reference. To accurately compare objects, it is recommended to compare their properties individually as these properties are primitive values.

To check if a specific object exists within a set, you can utilize the array some method for filtering.

let mySet = new Set([{item: 'SomeItem', selected: true}]);
let itemA = "SomeItem";
let isSelected =  Array.from(mySet).some(element => element.item === itemA);
console.log(isSelected);

Answer №2

Looking at it from a different perspective, Sets primarily return an iterable. Although they are hashed in order like a Map, based on your data structure, using a Map might be more advantageous in this scenario.

const x = new Set([
    { "foo": 1, selected: true },
    { "bar": 1, selected: false },
    { "baz": 1, selected: false },
    { "barf": 1, selected: false },
]);

To achieve your desired outcome, you'll need to convert the set into an array using Array.from (or use [...x] spread) and then iterate through to find the key.

Now, considering a Map:

const y = new Map();
y.set("foo", { selected: true });
y.set("bar", { selected: false });
y.set("baz", { selected: false });
y.set("barf", { selected: false });

With this approach, you just need to slightly adjust the structure to give item1 or any chosen Map key, and define the elements accordingly.

y.has("foo"); // true
y.get("foo").selected; //true

Therefore, if needed, you can easily obtain the iterable key name and determine which Map index contains the desired property.

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

Testing Vue components with Typescript and Jest does not display the expected values in the HTML output

Recently, I decided to focus on Test-Driven Development (TDD) using Typescript, so I started a new Vue project with vue-cli. I specifically chose Vue3, Typescript, and Jest for this project. However, when I ran the unit test initially, it failed to execute ...

When the update button is clicked, the textfield is hidden; it reappears upon refreshing the page

Our marketplace multi-vendor site on Magento allows sellers to list their products for sale. The frontend displays the price using the following code: Phtml <input onFocus="showPriceCancel('<?php echo $products->getId(); ?>');" clas ...

Displaying various Vue components within Laravel 6.x

After diving into Laravel and Vue, I managed to put together a navigation component as well as an article component. The problem I'm facing is that although my navigation vue component is visible, the article component seems to be missing. Reviewing ...

A concise way to write an else if statement in Javascript and jQuery

Is there a way to make this code more concise? It works perfectly fine, but it's too lengthy. Basically, the code involves two dropdown lists where the user selects options, and based on their selection, values appear in two textboxes. The catch is th ...

"jquery-ajax was unable to complete the request, whereas it was successfully executed using

I am currently using jQuery to trigger an ajax request. However, when I make the request using jQuery, I encounter an "Unexpected end of input" error with no response coming from the PHP file. Strangely enough, if I manually copy the request from the Chrom ...

Dealing with promises in ng-if function in AngularJS

When working with AngularJS, I have a scenario where I am using ng-show="isChecked('ID')" in an element to access a $rootScope array that is generated in another controller. Here's my function: $scope.isChecked = function(ID) { c ...

In a situation where Typescript fails to provide enforcement, how can you effectively indicate that a function is not defined for specific value(s)?

If I were to utilize Typescript to create a function called mean that calculates the mean of an array of numbers, how should I handle the scenario where the array is empty? Enforcing that an array must be non-empty can be inconvenient, so what would be th ...

Leveraging vuejs to dynamically insert a URL within a function

I am attempting to dynamically bind an image path inside a method. It seems feasible, but I'm uncertain if I am implementing the code correctly. Can someone review it? Essentially, I want to retrieve the selected image from the model rather than hardc ...

Display tables side by side using Material-UI

Presently, I am utilizing NextJs and MaterialUI to display a table with data fetched from an API created in Strapi. Challenge The current issue lies in using a table component with props that are imported into a page, where the props are mapped to an API ...

The WebSocket function is returning undefined even though it successfully fetches the user; however, the user is

I've been experimenting with a websocket to retrieve user information. When I establish the connection and send messages to receive the data, it returns undefined when I try to use that information elsewhere. However, if I run console.log within the ...

Add a new component in front of another component based on its attribute value

Creating a dynamic DIV and positioning it in between other Div's based on their attribute value is the goal. The desired outcome is to maintain sequence. <div data-door="1">1</div> <div data-door="3">3</div> <div data-door ...

Using Javascript, extend the start date by an additional two months in the CRM

My task is to calculate the expiry date by adding two months to a given start date. I came across this code snippet: var startDate = Xrm.Page.getAttribute('new_startdate').getValue(); var expiryDate = new Date(); expiryDate.setMonth ...

Navigation bar in reactjs remains visible even after clicking on an icon button, causing a temporary issue with

I'm facing an issue with my navigation bar created using material-ui. I have an onClick function set up so that when the user clicks the icon button, the navigation redirects to a new page and then should close. However, no matter what I try, the navi ...

When running the `mocha` command with `npm test`, no specific

Could use some help: I've encountered an issue while running a unit-testing command. The error messages are not being printed when there are errors, making debugging quite challenging. Here is the command I executed: and here's the package.json ...

Creating a dynamic side navigation menu that adjusts to different screen sizes

I have been working on a project's webpage that was initially created by another Software Engineer. After he left, I continued to work on the webpage. The issue I encountered is that he preferred a side menu over a navbar using the left-panel and righ ...

GET method returns an empty array in the express node server

app.get('/:user/:tag', function (req, res) { fs.readdir( 'api'+path.sep+req.params.user, function (err, files) { var tweets=[]; for (var i =1, j=files.length ; i <j; i++) { fs.readFile('api'+path.sep+ ...

Determine if a Node.js Express promise holds any data

I'm looking for assistance with my nodejs application that returns a promise. What I need help with is figuring out how to determine if the result of this promise contains data or if it's just an empty array. I attempted using Object.keys(result) ...

Observing the CSS class of an input element during async validation does not yield the desired results

Recently, I implemented a bootstrap directive that monitors all the input elements on a form and updates the CSS of its parent div to display validation errors in a Bootstrap-friendly manner. The directive checks for the presence of the ng-invalid class in ...

Assigning identical values to all properties of an object

Let's consider an object structured like this: myObject = { "a_0" : [{"isGood": true, "parameters": [{...}]}], "a_1" : [{"isGood": false, "parameters": [{...}]}], "a_2" : [{"isGood": false, "parameters": [{...}]}], ... }; The goal is ...

Looking to change the date format from 24/05/2021 to 24/May/2021 using jQuery or JavaScript?

My client prefers not to use a date picker, but wants to be able to type dates directly into a textbox and have them automatically converted to the format 24/May/2021 as they leave the field. I am looking for a solution using either Javascript or jQuery. ...