Unable to retrieve dynamically generated object property from an array in AngularJS 2+

Here is an example of an items array:

this.itemList = [
  { id: 1, name: 'a', address: 'as dasf a' },
  { id: 2, name: 'b', address: 'as dasf a' },
  { id: 3, name: 'c', address: 'as dasf a' }
];

And here is the headers array:

this.headers = [
  { name: 'id', show: true },
  { name: 'name', show: true },
  { name: 'address', show: false }
];

When attempting to access values from the arrays:

let obj = this.headers[0].name; // this equals 'id'
console.log(this.itemList[0].id) // this shows as 1 

However, when trying to do:

console.log(this.itemList[0].obj) // it returns undefined, why?

Is there a way to retrieve that value? Thanks

Answer №1

If you want to do it correctly, follow this format :

this.itemList[0][obj]

Explanation :

Why isn't the previous code working as expected?

this.itemList[0].obj 
// This won't work because it's trying to find 'obj' as a key in itemList[0],
// which will return undefined

However, with this updated code :

this.itemList[0][obj]
// Here, obj is treated as a variable and replaced with its value,
// resulting in this.itemList[0].id / this.itemList[0]['id']

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

Exploring the process of acquiring a button using refs in external JavaScript

Having encountered a situation where I have two different javascript files, I came across an issue. The first file contains a finish button that was initialized by using refs. Now, I need to access this button in the second file using refs. The code snipp ...

What is the best way to retrieve the file name from the current document's URL using JavaScript?

I need help with a Javascript function that can extract the current file name without any parameters. $(location).attr('href').match(/([a-zA-Z\-\_0-9]+\.\w+)$/); var current_path = RegExp.$1; if ((current_path == 'index. ...

Jquery Mobile: Navigating back to the first page after calling changePage

In the process of developing a mobile app with phonegap/cordova and jquery mobile, I encountered an issue where the user is supposed to land on a specific page from a status bar notification. However, the app initially displays the default page briefly bef ...

Runtime AbstractControl in Angular 2

Following the guidance provided in this answer here, I attempted to incorporate an "Add more" feature into my Angular 2 application. The associated project can be found on this link. However, in order to initialize the project, I had to temporarily comment ...

Using the highcharts-ng library in combination with ng-repeat was successful in creating multiple charts. However, in order to display different data for each chart, the

I need to provide the date either from the view template or possibly from the controller in order for the highchart to display the data specified by the <highchart /> directive. Explanation : <ul> <li ng-repeat="li in list"> ...

The validation process in Redux forms

Imagine we have the following types defined: interface MyFormFields { FirstName: string; LastName: string; } type FieldsType = keyof MyFormFields; const field1: FieldsType = "c"; const field2 = "c" as FieldsType; Now, I am looking to implemen ...

Issue with TypeScript not recognizing node_modules symlink in Docker container

I'm currently working on containerizing an Express app in TypeScript. However, I am facing issues linking node_modules that have been installed outside the container. Even though a volume is mounted for development, I keep encountering errors in my ed ...

The component prop of Typography in TypeScript does not accept MUI styling

Working with MUI in typescript and attempting to utilize styled from MUI. Encountering an error when passing the component prop to the styled component. The typescript sandbox below displays the issue - any suggestions for a workaround? https://codesandbo ...

What is the reason for the countdown number's color remaining the same even after it reaches a specific time threshold?

Creating a simple countdown for sports was my idea, but now I'm stuck on the "changeColor" part that I don't have enough knowledge about. The countdown is functioning perfectly, but customizing the colors and adding CSS animations seems challeng ...

Unable to transfer information from the Parent component to the Child component

Can you help me solve this strange issue? I am experiencing a problem where I am passing data from a parent component to a child component using a service method that returns data as Observable<DemoModel>. The issue is that when the child component ...

Calculate the total number of table rows added using jQuery

I am seeking help to identify the error in my code. My goal is to count the number of table rows added by the end user and display an alert box if the row count is not equal to 2. Below is my HTML code: <table width="100%" border="0" cellspacing="0" c ...

"Utilize an Angular button to upload a locally stored JSON file and populate a data

Hey everyone, I'm looking to use a button to load a local file and convert the file data into a jsonObject. The HTML structure: <div class="uuidLableLeft"> <b>Do you want to import your previous file (.json)?</b> <input style ...

The Nextjs application folder does not contain the getStaticPaths method

I encountered a problem with the latest nextjs app router when I tried to utilize SSG pages for my stapi blog, but kept receiving this error during the build process app/blog/[slug]/page.tsx Type error: Page "app/blog/[slug]/page.tsx" does not m ...

The element at index '0' is not defined for the data type 'number | [number, number]'

In my current project, I have a component named ComponentA which has a defined interface. Here is the snippet of the interface: interface A1 { isSingle: true; value: number; } interface A2 { isSingle: false; value: [number, number]; } exp ...

Steps for inserting a menu item into a Material UI Card

Below is an example I'm working with: https://codesandbox.io/s/material-ui-card-styling-example-lcup6?fontsize=14 I am trying to add additional menu options such as Edit and Delete to the three dots menu link, but so far I have not been successful. ...

Is there a way to adjust the time font size according to the dimensions of the time picker?

HTML and CSS .pickthetime { height: calc(var(--vh, 1vh) * 3); width: calc(var(--vw, 1vw) * 25); align-content: center; // center looks better, also tried left to stop it from breaking a new line on Safari on iOS font-weight: 300; } <input cla ...

What is the best way to retrieve the ID of the input element using a jQuery object?

After submitting a form with checkboxes, I retrieve the jQuery object containing the checked input elements. var $form = $(e.currentTarget); var $inputs = $form.find("input.form-check-input:checked") Here is an example of how the inputs are stru ...

Discover the best methods for accessing all pages on a Facebook account

I attempted to retrieve a list of all Facebook pages, but encountered an error. The error message states: 'request is not defined.' Here is the code snippet: var url = 'https://graph.facebook.com/me/accounts'; var accessToken = req.u ...

Utilize DataTables with a custom search form for enhanced data filtering

I rely on DataTables for its advanced functionality in creating tables with paging capabilities. When submitting data through a standard jQuery Ajax request using my own form, the returned data is formatted and then passed to the DataTables function to en ...

Troubleshooting the malfunction of jQuery's change() function

There are three HTML select tags on my page. I want these three select tags to function as follows: When I change selectA, selectB should automatically update based on the selection in selectA. Similarly, when an option in selectB is created, changing se ...