Working with Angular: Retrieving a JSON value by using a dynamic key

I have a variable called param within the scope as $scope.param, which is always set to either foo or bar. I am constructing a table with rows defined by <tr ng-repeat="d in data">.

When I use <td>{{d.foo}}</td> or <td>{{d.bar}}</td>, everything works perfectly and the data displays correctly. However, if I use <td>{{d.param}}</td>, Angular fails to find any data and the cell remains empty.

In simple terms, I am attempting to access a value of an object using a variable as the key instead of the key itself. Is there a way to achieve this?

Answer №1

Utilize bracket notation:

{{d[param]}}

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

Attempting to retrieve JSON Object by its designated key

Behold, behold! Feast your eyes on my wondrous creation, a masterpiece of JSON stored in a mystical var: var magicalData = { "Wednesday": { "OTHERS": { "count": 1, "response Time": 234 }, "URGENT": { "count": 15, "r ...

Problems with Ajax functionality

Excuse my rusty JavaScript skills but I'm attempting to use an AJAX call to a PHP file, pass it a plan type, and then determine if there are enough available slots for the plan. If so, return true; otherwise, false. Below is the Form in XHTML: <fo ...

Warning: Invariant Violation - The specified TurboModuleRegistry.getEnforcing('RNDocumentPicker') cannot be located

I've encountered the following error in my React Native project: ERROR: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'RNDocumentPicker' could not be found. Verify that a module by this name is registered in the native binar ...

Struggling to make my background image adapt to screen size changes and morph correctly

I am struggling to create a simple square background image with a navbar that adjusts responsively on different screen sizes. While I have been able to get the image and navbar set up, the image is not expanding the way I want it to. I envision the image f ...

Show a list of groups using JSON information

Looking to showcase a list of individuals using JSON data structures? <pre> <ul class="list-group"> <span class="badge badge-primary badge-pill">A</span> <li class="list-group-item d-flex justify-content-between align ...

Content remains empty despite Angular typeahead functionality

I am facing some significant challenges with using typeahead in angular.js. Although I can see that the objects are present in the function linked to the typehead attribute, the data is not being populated. Here is a relevant part of my controller: angul ...

What is the best way to select rows that contain a specific value within a JSON field in a Sequelize query?

I am working with MYSQL and I require a Sequelize.js query. Within my rows, each row contains a column of type JSON that includes data like the following: [ {id: 1234, blah: "test"}, {id: 3210, blah: "test"}, {id: 5897, blah: "test"} ] I have an i ...

Triggering the MouseLeave event in Chart.js with Angular

I encountered a situation with my Angular component code and need some guidance. Below is the code in question: Angular component html <canvas myChart> [dataset] = "dataVariable" [labels] = "labelVariable" (chartHover) = "chartHover($event ...

Leveraging a nodejs script integrated with socket.io within an angular/electron hybrid application

I have successfully created an electron/angular app that is functioning well. Additionally, I have developed a nodejs script to open a socket.io server using typescript + webpack to generate all files in a bundled js file. My challenge arises when trying ...

What is the method for selecting multiple HTML elements in React using querySelectorAll?

I am currently working with React using functional components and integrating react-bootstrap carousel. While everything works fine with react-bootstrap, I need to create three divs with the same classes in React for additional functionality. In traditiona ...

Guide on embedding a map inside a popover using Bootstrap

I am trying to create a popover that displays a map inside it. I attempted this simple example: <!DOCTYPE html> <html> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" c ...

Discover the content seamlessly integrated into HTML through a Chrome extension with Selenium

I am facing an issue while using Selenium to capture text injected by a Chrome Extension. Even though the text is being injected correctly, I am struggling to make the Selenium test wait for the div to appear and then store the inner text in a variable. Ca ...

What is the best approach to decipher an obfuscated JavaScript file?

While browsing a site, I came across a javascript file that appears like this: eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,Str ...

Is there a way to incorporate a deletion feature within a list of items using JavaScript?

When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...

How can Cognito be integrated on a pure HTML & JS website, with or without using Amplify?

After diligently reading through the documentation provided by AWS which mainly focuses on React JS, I am feeling a bit lost. My goal is to set up the sign-in, sign-up, and login components but the process seems complex. I stumbled upon an alternative met ...

What is the process for transforming promises into async await syntax?

login() { return new Promise((resolve, reject) => { userCollection.findOne({email: this.data.email}).then((myUser)=>{ if (myUser && myUser.password == this.data.password) { resolve("Congrats! Succe ...

Tips on how to properly format a date retrieved from a database using the JavaScript function new Date()

I've been grappling with the best method for inserting dates into the database, and currently I'm utilizing new Date(). However, when I query from the database, it returns a date format like this: 2021-09-24T12:38:54.656Z It struck me that this ...

Can you identify this specific Javascript/jQuery pattern that effectively encapsulates and conceals elements while still allowing for modifications to the webpage?

Has this pattern been created by someone to become a famous and well-known pattern? I have come across this pattern in the context of using Javascript/jQuery, like in init.js: var Initializations = {}; Initializations = (function($) { function doSomet ...

Having issues with the custom listing feature in Jquery UI auto complete not functioning as expected

I am facing an issue with my implementation of jquery UI autocomplete. The autocomplete functionality is not working as expected, despite the absence of any JavaScript errors. Below is the JSON data that I am working with: {"d":"[{\"label\":&bs ...

Submit a POST request using CoffeeScript to get a string from the returned object

I am encountering a small issue. Whenever I execute myVar = $.post('/check_2/', JSON.stringify({"newname": window.NEWNAME,}), callback, 'json') The variable 'myVar' holds an object. When I use console.log myVar, the output i ...