Converting Array Elements to Class Properties in Typescript

Question

Converting Array Elements to Class Properties in Typescript

Let's say we have a key 'abc' with the value of 'true'. It should be possible to access 'this.abc' and expect it to return true.

Class A {
    public someFun(){
        this.external.getData().subscribe((externalStream: Array<someType>) => {
            for(let i:number = 0; i < externalStream.length; i++){
                console.info(externalStream[i].key);    // The intention is for this to refer to a class variable
                console.info(externalStream[i].value);  // This value should correspond to the variable above

            }
        })
    }
}

angular typescript

Answer 1

Answer №1

Give this a shot:

Class B {
    public trySome(){

        const data = this;

        this.external.retrieveData().observe((externalStream: Array<someType>) => {
            for(let j:number = 0; j < externalStream.length; j++){
                data[externalStream[j].key] = externalStream[j].value;
            }
        })
    }
}

Answer 2

Give this a shot:

Class B {
    public trySome(){

        const data = this;

        this.external.retrieveData().observe((externalStream: Array<someType>) => {
            for(let j:number = 0; j < externalStream.length; j++){
                data[externalStream[j].key] = externalStream[j].value;
            }
        })
    }
}

Answer 3

Answer №2

When using Typescript, you have the ability to create dictionary types, also known as hash maps. This feature is a result of the type-safe nature of Typescript that prevents certain JavaScript code like the following:

var value = {};
value.abc = true;
for (var key in value) {
    console.info(key);
    console.info(value[key]);
}

To ensure type safety, you must be aware of the properties at compile-time, which may not always be the case. This is where a dictionary type comes into play:

let value: { [key: string]: boolean };
value['abc'] = true;
for (var key in value) {
    console.info(key);
    console.info(value[key]);
}

In your specific scenario, it would look something like this:

class A {
    public someFun(){
        this.external.getData().subscribe((externalStream: Array<{ [key: string]: boolean }>) => {
            for(let i:number = 0; i < externalStream.length; i++){
                for(let key in externalStream[i])  {
                    console.info(key);
                    console.info(externalStream[i][key]);
                }
            }
        })
    }
}

Answer 4

When using Typescript, you have the ability to create dictionary types, also known as hash maps. This feature is a result of the type-safe nature of Typescript that prevents certain JavaScript code like the following:

var value = {};
value.abc = true;
for (var key in value) {
    console.info(key);
    console.info(value[key]);
}

To ensure type safety, you must be aware of the properties at compile-time, which may not always be the case. This is where a dictionary type comes into play:

let value: { [key: string]: boolean };
value['abc'] = true;
for (var key in value) {
    console.info(key);
    console.info(value[key]);
}

In your specific scenario, it would look something like this:

class A {
    public someFun(){
        this.external.getData().subscribe((externalStream: Array<{ [key: string]: boolean }>) => {
            for(let i:number = 0; i < externalStream.length; i++){
                for(let key in externalStream[i])  {
                    console.info(key);
                    console.info(externalStream[i][key]);
                }
            }
        })
    }
}

Converting Array Elements to Class Properties in Typescript

Answer №1

Answer №2

Similar questions

The parameter type 'NextHandleFunction' does not match the expected type 'PathParams' in the argument

Dealing with Errors - Utilizing Observable.forkJoin with multiple Observable instances in an Angular2 application

Tracking property changes in Angular can help developers easily identify modifications to specific

Receive the most recent information from Angular's service method

Click on Ionic to toggle the label and enable editing

Guide to utilizing props conditionally in a Material UI TextField component

What is Angular's approach to handling a dynamic and unprocessed JSON object?

Encountering a "Cannot POST" error in Angular upon redirection to a callback URL with a SAML response

Identifying and organizing scroll-related errors in AngularJS using TypeScript clustering

Retrieving Status Text from an Angular 8 Http Service

Inquiry on ReactJS conditional rendering concept

Obtaining the Enum key in Angular using the Enum type instead of a string value

Tips for boosting ViteJs development mode performance

Step-by-step guide on implementing virtual scroll feature with ngFor Directive in Ionic 2

inject a dynamic loading icon within the choices of a datalist in an Angular application

Tips for including multiple plugins in a next.config.js

Guide on converting general objects into a TypeScript class

Mobile application built on Ionic 2 featuring Bluetooth Low Energy (BLE) capabilities

Tips for creating type-safe assertion functions in TypeScript

Are there certain RxJS operators that seem to be missing in your Angular2 CLI project? Wondering what steps to