Accessing the property of an object with TypeScript

Question

Accessing the property of an object with TypeScript

I am working with an array of objects, where each object contains two properties:

{key:count}

When configuring my chart, I need to set the data source in this format:

{meta: "unknown", value: [the count of unknown]},
{meta: "male", value: [the count of male]},
{meta: "female", value: [the count of female]}

For example, if my current array looks like this:

[{"0":"10"}, {"1":"7"}, {"2":"9"}]

, where 0 represents unknown gender, 1 for male, and 2 for female.

Is there a way to automatically set the value in the chart data based on the key from the array in just one line of code?

Edit:

I have already created a method that accomplishes this:

public getKeyValue(data, key) {
    for (var i = 0; i < data.length; i++) {
        if (data[i].key == key)
            return data[i].count;
    }
    return 0;
}

However, I'm curious if there is a more concise solution similar to LINQ.

object typescript

Answer 1

Answer №1

Yes, it is possible to achieve the desired result, but the solution may not be very elegant.

You can use the following code snippet:

data.map(item => item.key === key ? item.count : 0).reduce((previous, current) => previous + current);

(Check an example in playground)

However, it's worth noting that this solution may not be as efficient as your original code. Your code will only iterate over array elements until a match is found, while the provided solution will always iterate through all elements regardless of whether a match is found or not.

For instance:

var key = "key3",
    data: { key: string, count: number}[] = [
        { key: "key1", count: 1 },  
        { key: "key2", count: 2 },  
        { key: "key3", count: 3 },  
        { key: "key4", count: 4 },  
        { key: "key5", count: 5 },
        //...
        { key: "key1554", count: 1554 }
    ];

The array data has a length of 1554, but if you are looking for the 3rd element, your methodology will only have 3 iterations to find and return the value. In contrast, the alternative solution will require 3108 iterations - one cycle (1554) for the map function, and another cycle for the reduce function.

Answer 2

Yes, it is possible to achieve the desired result, but the solution may not be very elegant.

You can use the following code snippet:

data.map(item => item.key === key ? item.count : 0).reduce((previous, current) => previous + current);

(Check an example in playground)

However, it's worth noting that this solution may not be as efficient as your original code. Your code will only iterate over array elements until a match is found, while the provided solution will always iterate through all elements regardless of whether a match is found or not.

For instance:

var key = "key3",
    data: { key: string, count: number}[] = [
        { key: "key1", count: 1 },  
        { key: "key2", count: 2 },  
        { key: "key3", count: 3 },  
        { key: "key4", count: 4 },  
        { key: "key5", count: 5 },
        //...
        { key: "key1554", count: 1554 }
    ];

The array data has a length of 1554, but if you are looking for the 3rd element, your methodology will only have 3 iterations to find and return the value. In contrast, the alternative solution will require 3108 iterations - one cycle (1554) for the map function, and another cycle for the reduce function.

Accessing the property of an object with TypeScript

Answer №1

Similar questions

Having an excess of 32 individual byte values

Tips for accessing the PR number in a Node.js GitHub Probot listening for the `pull_request` event

Is it possible to specify broad keys of a defined object in TypeScript using TypeScript's typing system?

Are the functions 'useEffect' and 'useCallback' being repetitively used in this case?

Every day, I challenge myself to build my skills in react by completing various tasks. Currently, I am facing a particular task that has me stumped. Is there anyone out there who could offer

Change the background color of a MUI ToggleButton based on a dynamic selection

What is the best method to trigger a bootstrap modal window from a separate component in Angular 8?

Angular HTTP post is failing on the first attempt but succeeds on the second try

A step-by-step guide on updating a deprecated typings package manually

Improving Javascript Arrays for Easier Reading

Error TS2322: Type 'boolean' cannot be assigned to type 'undefined'. What is the best approach for dynamically assigning optional properties?

What is the alternative to the deprecated 'combineLatest' method in rxJs and how can it be replaced?

Encountering the following error message: "Received error: `../node_modules/electron/index.js:1:0 Module not found: Can't resolve 'fs'` while integrating next.js with electron template."

Whoops! Looks like there was a hiccup with the Vercel Deployment Edge Function, causing an

MUI Select component not displaying top border

What is the best way to insert a placeholder React element into a different Component using TypeScript?

The type 'ElementClass' is lacking several key properties, specifically context, setState, forceUpdate, props, and refs

React throwing a typescript error while attempting to update state based on the previous state

Beware: The use of anonymous arrow functions in Next.js can disrupt Fast Refresh and lead to the loss of local component state

"Troubleshooting: Why Angular2's ngOnChanges is not triggering with array input