Filtering the inner ng-repeat based on the variable of the outer ng-repeat

I have a collection of elements. Some of these elements are considered "children" of other elements known as "parent" elements. Instead of rearranging the JSON data received from the server, I am attempting to filter the results within the ng-repeat loop. Each element in the collection has an id and a property called "father_id". If this property is set to 0, it indicates that the element is a parent. The issue I'm facing is filtering the inner loop based on values from the parent loop.

Here is how I successfully filter the parent elements in the loop:

 ng-repeat="fatherElement in pageInitialAjaxContent | filter:{father_id:0}"

This displays all elements with a "father_id" of 0, indicating they do not have a parent which makes them parents themselves.

For the inner loop, my unsuccessful attempt looks like this:

ng-repeat="childElement in pageInitialAjaxContent | filter:{father_id:fatherElement.id}"

The goal here is to filter items where the father ID matches the ID of the parent element. However, this approach yields unexpected results.

Could someone provide guidance on how to properly construct this expression?

Answer №1

I believe a modification is needed in the second ng-repeat block

ng-repeat="ChildEvent in pageInitialAjaxContent | filter:{father_id:fatherEvent.id}:true"

The :true parameter ensures an exact match, whereas the default, :false, looks for a substring match.

For more details on the comparator argument, please refer to the documentation here

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

What could be the reason why my POST endpoint isn't able to receive this AJAX request?

I am currently working on a JavaScript function that is supposed to send JSON data to my escreve POST REST method. $(document).ready(function() { $("#idform").on('submit', function(e) { e.preventDefault(); alert($("#idform"). ...

Error: Undefined Property in Angular 2 ViewChild Declaration

Exploring a simple example where the childMethod is called within the child component from the parent component using the @ViewChild() decorator. However, encountering an issue where the ViewChild variable remains undefined. Sample Child Component Code: ...

Select the hidden HTML option value automatically according to the previous option selected

I am working on a form that includes 2 select tags with the options male and female. The first select, "gender", is visible to the user while the second select, "age", is hidden. <select name="gender"> <option value="1">Male</option> ...

Dynamic Field Validation in Angular 6: Ensuring Data Integrity for Dynamic Input Fields

After successfully implementing validation for one field in my reactive form, I encountered an issue with validating dynamically added input fields. My goal is to make both input fields required for every row. The challenge seems to be accessing the forma ...

The error was thrown at line 800 in the loader.js file of the internal modules

When I ran yarn install in my project folder, I encountered the following error: internal/modules/cjs/loader.js:800 throw err; ^ Error: Cannot find module 'ts-node/register' Require stack: - internal/preload ?[90m at Function.Module._resolveF ...

saving selected values to the database

I have updated the question, thank you for your help. The code seems to be working fine but I need some assistance with increasing the booked count in the database when the user clicks "Confirm Choices." Additionally, if the user selects a booked image, ...

I seem to be encountering an issue while looping through an array of objects. Instead of retrieving all two elements, only one object is being returned. Can

Just a heads up, I'm new to coding so please bear with me. I'm attempting to run through the "diary" array and the function "howMany" is only showing 2 'Home' elements, although there are actually 4 'Home' elements in total i ...

Exploring data-toggle elements using jQuery

I am faced with the challenge of dynamically constructing a form using jQuery. The form includes a checkbox list of items that I am creating in the following manner: function initializeForm() { var html = ''; var items = GetItems(); for ( ...

Angular 1.x - Creating a versatile table with dynamic rows and columns

Objective - Present a dynamic table showcasing various rows and columns as illustrated below - https://i.sstatic.net/ZEyUs.png Dynamic Header - The fund codes represent the values for "name" extracted from the json object array. Dynamic rows consist of ...

Tips for Showing Websocket Response On Web Browser Using Node.js

Just starting out with NodeJS and here's my code snippet: const webSocket= require('ws'); const express = require('express'); const app=express(); Var url = "wss://stream.binance.com:9443/BTCUSDT@trade`" const ws = new webS ...

Dealing with POST redirection and retrieving parameters in Next.js

In a typical scenario, browsers send GET requests and servers return pages. However, in my case, I am making requests to a remote server and need to receive responses. The issue is that the server redirects me back to my page via a POST request with some d ...

Troubleshooting: Difficulty Reading .val() on Elements Selected by Class in jQuery.fn.init(9)

I am facing an issue while trying to retrieve all elements with a specific class name using the code below: productPrices = $('.product-price'); Instead of getting individual values, I am getting the following output: jQuery.fn.init(9) [div. ...

AngularJS tree grid component with customizable cell templates

I have been utilizing the tree-grid component in AngularJS from this link: Here is an example of it on Plunker: http://plnkr.co/edit/CQwY0sNh3jcLLc0vMP5D?p=preview In comparison to ng-grid, I am unable to define cellTemplate, but I do require the abilit ...

Tips for bringing a particular tab into focus when a page initially loads

My webpage features custom links (tabs) that display content when clicked. By default, the first tab is selected and its content is shown, while the rest are set to display:none. Clicking on any other link will assign the 'selected' class to it, ...

Toggle the display of dropdown 2 or dropdown 3 depending on the option chosen in dropdown 1

I am struggling with a form that contains 3 dropdowns: <select id="1" required> <option value="">Choose an option</option> <option value="1">Apple</option> <option value="2">Orange ...

Traverse an array in JavaScript using jQuery, PHP, and AJAX

Trying to iterate through a JavaScript object using AJAX has led me to explore options like json_decode, but it turns out this is an array and not an object. var array = [{type: 'a', value: 1}, {type: 'b', value: 1}] $.ajax{ url: "p ...

Creating a Future Prediction Graph with ECharts

I am looking to create a forecast chart that includes both Actual values (presented as a line chart) and projected values (displayed as a dotted chart). An example of what I have in mind can be seen here, created using Excel: Although I couldn't loca ...

AngularJS form fields dynamic validation error "Instance data is missing" on datepicker directive

In my angularjs application, I am tracking household member data and one of the crucial fields is Date of Birth (DOB). To create a custom datepicker directive, I referred to a helpful post on Stack Overflow which can be found at this link: jQuery ui datepi ...

Oops! Looks like there's an issue with the NextJS Custom Carousel bug. The error message reads: ReferenceError: document is not defined and is unable to read properties of undefined (

I have developed a unique carousel component to showcase text testimonials from scratch. The custom carousel utilizes a specialized script, carouselFunction.js, for navigational functionality to cycle through each testimonial. Here is an image of the carou ...

Using JavaScript, conceal a specific Div by examining the content within another Div

I am attempting to implement some logic using JavaScript. The goal is to hide the "cart-button" div if the innerHTML value of a div with the class "b-format" is set to Audio, otherwise hide the "more-button" div. However, for some reason this functionality ...