Retrieving the Value of a Member in an Object using Angular

Question

Retrieving the Value of a Member in an Object using Angular

Is there a way to retrieve the value of an object in Angular using a variable as the member identifier?

For example:

--> my Angular class object:

Object1 {
name: foo
property2: bar
}

--> my function:

myFunction(memberName: string) 
{ 
   return Object1.membername 
}

--> when executing: myFunction("name") returns "foo"

Is this achievable?

Additional info:

This is the object class:

 import { headerStateColor } from "../header/headerDeviceStateColor.model";
 import { betterNameForDeviceState } from "./deviceStateHelper";

export class deviceModel {
    // Class properties here...
};

This is the class where I need to utilize the "dynamic member"

export class DeviceDetailsComponent implements OnInit {
  // Class methods and variables defined here...
}

An error occurs when attempting to use a variable as an identifier:

Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'deviceModel'.
 No index signature with a parameter of type 'string' was found on type 'deviceModel'.ts(7053)

angular typescript

Answer 1

Answer №1

Consider using the bracket notation:

myFunction(memberName: string) 
{ 
   return Object1[memberName]
}


inputProcessing(field: string) {
     if(this.deviceDetailModel != NULL)
     {
       (this.deviceDetailModel as any)[field]
     }
   }

In TypeScript, when accessing object properties using bracket syntax, the object must support indexable type. In your case:

this.deviceDetailModel[field]

deviceDetailModel has indexed keys of the same type as 'deviceModel':

        'deviceState'
        'device_id'
        'mac_address'
         ... and so on

However, since field is of type string and not an indexed key, you encounter an error. To resolve this, either specify deviceDetailModel as any or assign an indexable type to it.

To illustrate with an example, consider a person class:

 class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

If we have an object of type Person:

const person1: Person = { name : 'Ritesh' };

Accessing name of person1 with dot notation works fine:

console.log(person1.name) // This will work

But using bracket notation can cause errors if the type is explicitly set, similar to:

const n: string = 'name';
console.log(person1[n])

To fix this issue, either use any:

const n: string = 'name';
console.log((person1 as any)[n])

Or make Person an indexable type:

 interface Person {
   {[key: string] : string
 }

By defining keys and values for Person type, the error can be resolved. Check out this playground for more insights: TypeScript Playground

Answer 2

Consider using the bracket notation:

myFunction(memberName: string) 
{ 
   return Object1[memberName]
}


inputProcessing(field: string) {
     if(this.deviceDetailModel != NULL)
     {
       (this.deviceDetailModel as any)[field]
     }
   }

In TypeScript, when accessing object properties using bracket syntax, the object must support indexable type. In your case:

this.deviceDetailModel[field]

deviceDetailModel has indexed keys of the same type as 'deviceModel':

        'deviceState'
        'device_id'
        'mac_address'
         ... and so on

However, since field is of type string and not an indexed key, you encounter an error. To resolve this, either specify deviceDetailModel as any or assign an indexable type to it.

To illustrate with an example, consider a person class:

 class Person {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

If we have an object of type Person:

const person1: Person = { name : 'Ritesh' };

Accessing name of person1 with dot notation works fine:

console.log(person1.name) // This will work

But using bracket notation can cause errors if the type is explicitly set, similar to:

const n: string = 'name';
console.log(person1[n])

To fix this issue, either use any:

const n: string = 'name';
console.log((person1 as any)[n])

Or make Person an indexable type:

 interface Person {
   {[key: string] : string
 }

By defining keys and values for Person type, the error can be resolved. Check out this playground for more insights: TypeScript Playground

Retrieving the Value of a Member in an Object using Angular

Answer №1

Similar questions

Angular Authentication Functionality

Dealing with custom path problems in Angular 2+ webpack configurations

Enhanced string key indexer type safety in TypeScript

What are some creative ways to design the mat paginator in Angular?

The elements mat-toolbar, mat-sidenav, and mat-sidenav-container are unrecognized

How can I access the component name and parameters during the NavigationEnd event?

What is the best way to retrieve children generated by a custom HTML component using idiomatic React methods?

Incorporating the unshift method in JavaScript: A Step-by-

What is the best way to utilize one service within another service without the need for providers array or providedIn?

Angular wrapper for resizing iframes (Obtain height of target site within iframe)

What is the best way to implement a selected option in AngularJS 2?

When attempting to utilize expo-av in a React-Native project on iOS, the recorded MP4 file encountered an issue when trying to submit it as form data for Open

What is the best way to configure two different 'projects' build settings in the project.json file of an Nx workspace, similar to how it is done

The 'AppsList' generic type needs to have one type argument specified.ts(2314)

Angular displays X items in each row and column

Unlimited Scrolling in Angular 2: A Complete Guide

Emphasize the search query in Angular 2

Is it possible to extend an Angular component and then use the base component in an ngFor loop?

Creating a distinct input for each row in a table using Angular 2

Guide on integrating a Single Page Application into an ASP.NET Core library and hosting it from a specific route