What is the method for utilizing string interpolation in Angular/Typescript in order to retrieve a value from a variable?

I have a variable called demoVars, which is an array of objects with properties var1, var2, and var3.

In my component class, I have a variable named selectedVar that holds the name of one of these properties: var1, var2, or var3.

I want to dynamically push the value of the selected property from each object in demoVars into another array called demoArr.

To achieve this, depending on the value of selectedVar, I need to push the corresponding property value for each object in demoVars into demoArr.

The issue arises when trying to use string interpolation within the push() method to access the value of the selected property. The syntax used results in pushing the string literal instead of the actual value.

I am looking for the correct syntax or approach to accomplish this task effectively.

javascriptangularjstypescriptstring-interpolation

Answer №1

Try using bracket notation:

for( const item of this.items) {
    this.itemList.push(item[this.selectedItem]);
}

To add an additional layer of security, you can verify if the object possesses the specified property:

for( const item of this.items) {
    if (item.hasOwnProperty(this.selectedItem)) {
        this.itemList.push(item[this.selectedItem]);
    }
}

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

Troubleshooting problem with custom Angular directive integrating KineticJS

Hey there, I'm currently working on putting together a KineticJS application in Angular and need to resolve a minor issue. While following an example for setting up a draggable shape in AngularJS using KineticJS from this link: , I encountered this er ...

javascripthtmlangularjscanvaskineticjs

retrieve information in json format from a specified web address

I need to figure out why the data from a specific URL is not being displayed properly on my node application. It seems like there might be an error in my code. const extractRefDefaultSchema = async (data) => { const url = "https://mos.esante.gouv.f ...

javascriptnode.jsjsonexpresstry-catch

Using a for-loop in Typescript to iterate over objects in an array

Consider an Array structured as follows: let bodyDataAnswer = { 'answers':[{ 'question_id':this.verifyCustomer.questions[0].id, 'int_result':this.verifyCustomer.questions[0].answer_template.answers["0"].int_result, ...

angulartypescript

When implementing jQuery $.ajax with Angular, the DOM fails to update

Based on the value retrieved from an XHR call to the server, I am looking to display different content: <div class="container"> <div class="header" ng-controller="MyController"> <div ng-switch on="myScopeVar"> <d ...

jqueryangularjsangularjs-scope

Navigating with buttons in React JS

In my material-ui, I have a button set up like this: <Button style={green} raised="true" label="Continue to create group"}> CREATE NEW GROUP </Button> I am looking to make it so that when the button is clicked, it will take me ...

javascriptreactjsmaterial-ui

Is there a way to execute JavaScript tests by incorporating debugger statements?

There isn't a one-size-fits-all solution to this question, and it hasn't been addressed on Stack Overflow either. My background is in Python, where I can use import pdb; pdb.set_trace() to debug code step by step with a debugger. How can I achiev ...

javascriptnode.jsunit-testingdebuggingtesting

The data type 'string' cannot be assigned to the type 'SystemStyleObject | undefined' in the context of Next.js and Chakra UI

I am currently working on a project that involves Next.js, TypeScript, and Chakra UI. While configuring Button themes in the button.ts file, I encountered an error related to the baseStyle object for properties like borderRadius, color, and border: Type & ...

reactjstypescriptnext.jseslintchakra-ui

Bringing in data using .json files in a react native environment with Redux

I have developed a fitness app and I am utilizing Redux to store all the sets and workouts. Currently, I have manually entered all the exercises into Redux data for testing purposes. However, I now have all the exercises stored in a .json file and I want t ...

javascriptjsonreact-nativeredux

React DnD now enables dragging an entire list of cards instead of just a single card

Implementing react DnD in my react Project has been challenging. In the render method, I have defined a variable called Populate that generates a list of cards as shown below: render() { var isDragging = this.props.isDragging; var connect ...

javascriptreactjsmaterial-uireact-dnd

The HTML elements in my JSX code seem to constantly shift around whenever I resize my webpage

Using react.js, I'm currently developing a website that appears like this before resizing: pre-resize_screenshot_website However, upon vertical or diagonal resizing, the layout becomes distorted especially in the 'availability search bar' ...

javascripthtmlcssreactjs

What is the process for inputting a predefined function into an interface?

In my project, I have a Locale interface that defines the properties of a locale for my component: interface Locale { src: string; alt: string; language: string; i18nFormat: string; } During debugging, I am using the built-in .toSource() function ...

reactjstypescript

Error message: "The contract is not defined in thirdweb-dev/react

I am currently using thirdweb-dev/react library to interact with a smart contract. However, I am encountering an issue where the contract is showing up as undefined in my code along with the following error message: query.ts:444 Error: Could not ...

javascriptreactjssmartcontractsweb3js

Initiating PHP outcomes with the integration of JQUERY and Bootstrap

Currently, I am working on a Twitter search functionality that allows me to search for any content on Twitter. While the feature is functional, I am facing some challenges with displaying the results in the desired format. Ideally, I would like the results ...

javascriptphpjqueryajaxtwitter-bootstrap

Can you explain the meaning of the ?. operator in JavaScript?

While using react-hook-form, I encountered the ?. operator. Can you explain its meaning? Here's an example of how it works: <span>{errors?.name?.message}</span> The errors variable is obtained from useForm() by destructuring, as shown bel ...

javascriptreactjsreact-hook-form

Having difficulty rendering JSON data on an HTML webpage

Currently, I am working on an API App that utilizes the Foursquare API. With the help of my getRequest function, I am able to obtain results in JSON format, which are then displayed in my console.log. However, the challenge lies in parsing the data from J ...

javascriptjqueryhtmljson

Unable to retrieve JSON element using Fetch

I'm attempting to retrieve a JSON file and exhibit its components within a div. Here is the JSON data I have: [ { "0":{ "host_id":"129230780", "host_names":"STK Homes", ...

javascriptjsonfetch

Combining laravel and angularjs for efficient routing: a complete guide

Currently, I am utilizing the Laravel PHP framework for executing my code and I'm interested in having AngularJS manage the routing. An example that I have come across demonstrates how to switch between pages using AngularJS routing methods, however, ...

phpangularjs

Picture is currently not displaying within a NextJS element

A question arises in my Firebase web app regarding the NextJS component below: import Link from "next/link"; import Image from 'next/image' import "./displayShop.css"; import telImg from '../images/Telephone.png'; ...

typescriptfirebasenext.js

AngularJS feature: Automatically scrolling to the same position on the next view when clicking a link

I have an issue with a link on a template within an AngularJS application. The link is located at the bottom of the page, so I need to scroll down to click on it. Once clicked, the view changes to the linked page as expected. The problem is that after cli ...

angularjs

The compilation of the Angular application is successful, however, errors are arising stating that the property does not exist with the 'ng build --prod' command

When compiling the Angular app, it is successful but encountered errors in 'ng build --prod' ERROR in src\app\header\header.component.html(31,124): : Property 'searchText' does not exist on type 'HeaderComponent&apo ...

javascriptangulartypescriptbuild