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

Angular - Highlight a section of a string variable

What is the use of the mongoose $gt operator in an Express application built with

Experiencing an Issue with NGINX Loading Vue 3 Vite SPA as a Blank White Page

TypeScript: implementing function overloading in an interface by extending another interface

"Modifying the form of an item by adjusting its variable, and rendering certain object properties as

Update a BehaviourSubject's value using an Observable

Is it possible to turn off Angular CLI ng build linting for a specific directory?

``Is it possible to iterate through a collection of objects using a loop?

Angular 2 Google Chart: Defining column type using TypeScript

"Introducing a brand new column in ng2-smart-table that is generated from an Object

Enhancing your TypeScript version

Exploring the elements within the ContentChildren directive in Angular

How can I retrieve the name of a constant enum member in TypeScript as a string?

Tips for determining if an HTMLElement has already been created

Is it better to store data individually in localStorage or combine it into one big string?

In Visual Studio, the .js.map files and .js files seem to be mysteriously hidden, leaving only the TypeScript .ts files visible

The type 'string[]' is missing the required property 'label', resulting in a typescript error

Enhanced string key indexer type safety in TypeScript

Adding date restrictions to the main method is necessary for controlling the input and output

Tips for accessing the value and text of an Angular Material mat-select through the use of *ngFor