Using AngularJS to connect nested ng-repeat loops with keys referencing each other

I am trying to reference the key value from one repeat value to another. The concept is a bit complex, but you can see an example in this jsfiddle http://jsfiddle.net/u75us/163/

What I want to accomplish is getting the f_column value from the key_var array and using that same key value to retrieve a corresponding value from the value_var array.

Please note that the code in the jsfiddle will generate an error because the syntax {{val.{{key.f_column}}}} is not valid in angularjs. This is just pseudocode representing what I aim to achieve.

Is there a way to achieve this functionality?

<ul ng:controller="Cntl">
<li ng:repeat="key in key_var">{{key.f_column}}
    <li ng:repeat="val in value_var">{{val.{{key.f_column}}}</li>
</li>

function Cntl() {
this.value_var = [ 
    {"v_a":"a" , "column1" : "v1" },
    {"v_a":"a" , "column2" : "v2" } 
]

this.key_var =  [
     {"f_column":"column2"},
    {"f_column":"column1"}
];

}

Answer №1

When you want to access a property of an object using a variable, you should utilize the square bracket notation. This applies to JavaScript in general, as well as Angular.

For example:

{{val[key.f_column]}}

Check out this demonstration: http://jsbin.com/OsuKUQo/1/

Answer №2

Error in Syntax: Why is there an unexpected token ";"?

{{val.{{key.f_column}}} 

Modify this to

{{ val.key.f_column }}

Answer №3

Yoshi mentioned the method of accessing a JavaScript property using square brackets notation.

In the provided example, two essential references were missing: `$scope` in the controller and `ng-app` in the HTML. Without these, AngularJS cannot properly bind your application to your HTML. To understand the meaning of `value_var` and `key_var`, they need to be bound to `$scope`.

http://jsfiddle.net/U3pVM/1820/

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

Error message: An unfamiliar provider encountered while initializing the service in Angular framework

Currently, I am delving into the world of ionic and angular by creating a simple texting application. I decided to kick off the project using the tabs template provided by ionic and am gradually modifying elements to gain a better understanding of the func ...

Adjust the width of the table to scroll horizontally and size down to fit within the

My webpage is structured with a sidebar and content section, using flex display with the sidebar set to 0.15 flex and the content set to 0.85 flex. I want this page to be full width of the viewport. The issue arises when I try to incorporate a table into ...

Having trouble with Bootstrap-tour and Bootstrap 4 alpha 6? It seems like n.popover is not functioning properly

Attempting to integrate bootstrap-tour with bootstrap 4 and encountering the following error: Type Error: n.popover is not a function The code initialization looks like this: var tour = new Tour({ steps: [ { ...

Location-based services: Updating the position of a Google Maps marker without refreshing the entire map interface

How can I update only the marker on a map when the device is in motion or has increased accuracy? I want to reload the map when the position changes, but only move the marker. Below is the code snippet that I currently have: if (navigator.geolocation) { ...

What are your thoughts on this method for preventing scrolling?

Is there a way to prevent scrolling of the underlying content on a webpage when a modal is displayed? I found this code snippet that achieves that. (http://jsfiddle.net/77P2e/) var $window = $(window), previousScrollTop = 0, scrollLock = false; $window.s ...

Ensure that the module is exported before the Node.js file completes its execution using the `import`/`export` syntax

In the process of developing an API with express, my objective is to have a separate file for each endpoint. The idea is to create the router in its own file, export it, and then import the endpoint files to be executed. These endpoint files will import th ...

Iterate through the entire array without including a specific item

I am struggling with looping through an array of items and applying some code to each item while excluding one specific item (the clicked-on item). I have experimented with using splice, but that method ends up removing the array item completely, whereas I ...

Accessing data points in jQuery

Here is a sample code I'm working with : <script type="text/javascript"> var currentPicture;//default picture var picEL;//the image viewer element jQuery("#backImageShower").hover( function(i) { picEL = j ...

Is Storybook webpack stuck in a loop, rebuilding and reloading constantly?

While working on a NextJS project with Storybook, I am encountering a recurring issue where the webpack keeps rebuilding continuously without stopping. This relentless rebuilding process puts a strain on my CPU and drains the battery of my device. Even aft ...

utilizing jQuery to deliver a $.post request to a .aspx file

Recently, I started following a jQuery tutorial on the phpAcademy channel hosted on thenewboston. In this tutorial, they demonstrate how to create an email validation form using ASP.net instead of PHP. However, despite following all the steps in the tutor ...

Once a new element is inserted into the DOM, it no longer triggers the same functions as before

<script type="text/javascript"> $(function(){ $('button').each(function(i){ $(this).click(function(){ $(this).after('<br /><button type="button">Button</button>'); }); }); }); ...

What is the reason for the find() method not displaying the most recent data from a MongoDB database in an Express.js application?

Upon calling the app.post('/form-submit', funtion(req, res)) method, my expectation is for it to first save the data using save(). This works fine, but then when I call the find() method, it shows all the data from the mongoDB database except for ...

Unable to retrieve the iframe variable from the parent as it returns undefined

I am trying to retrieve a variable within an iframe from the parent index.html. Here is the index.html code: <!doctype html> <html lang="en-us> <head> <title>Test</title> </head> <body> <p>Test& ...

Is there a way to bring in data from a .d.ts file into a .js file that shares its name?

I am in the process of writing JavaScript code and I want to ensure type safety using TypeScript with JSDoc. Since it's more convenient to define types in TypeScript, my intention was to place the type definitions in a .d.ts file alongside my .js fil ...

Removing the cloned element is not possible

In my grid, there is a feature where hovering over a box creates a clone of that box which is positioned directly above it (using z-index/overlay). Once the user moves the cursor away from the box, an animation should play, and at the end of it, the box sh ...

What is the recommended way to include an image in a v-for loop in Vue.js?

I have attempted various online solutions, but I am still unable to display images on the screen. Could it be a simple mistake? The file names and folders are accurate. When providing the path, I aim to retrieve the image associated with the sub-club name ...

Locate the nested route within one of the child components in React Router that corresponds to a specific id

Picture this scenario where I have a list of routes: const routes = [{ id: "1", path: "animals", children: [{ id: "1.1", path: "birds", children: [{ id: "1.1.1", path: "co ...

Event not pausing for user response within dialog

I'm trying to prompt the user to confirm before leaving a page, but I'm encountering an issue where the location change is not waiting for the user's response. Here is the code snippet: angular module 1: ... function confirmLeavePage(e, n ...

Predefined date range is set by the OnChange event of Daterangepicker.js

I'm currently exploring the implementation of the onChange event in this select picker with the assistance of the daterangepicker.js library. Unfortunately, after conducting a thorough search on the DateRangePicker repository, I was unable to find any ...

The error message you are encountering is: "Error: Unable to find function axios

Can't figure out why I'm encountering this error message: TypeError: axios.get is not functioning properly 4 | 5 | export const getTotalPayout = async (userId: string) => { > 6 | const response = await axios.get(`${endpoint}ge ...