Filtering arrays in AngularJS and accessing nested arrays within the filtered results

My goal is to filter an array of 'forms' by their 'id' and then return its corresponding 'fields'.

Here's what I currently have, but unfortunately nothing seems to be returned:

<select ng-options="option.displayName for option in forms.fields track by option.id|filter: {'id': component.form.id}" ng-model="component.field"></select>

The filtering on 'forms' works perfectly if I just want the complete form object,

forms|filter: {'id': component.form.id}
. However, my specific requirement is to extract the field names and use them to populate the select dropdown.

{        
  forms: [   
    {
      id: 1,
      name: 'form 1',
      fields: [
        {
          displayName: 'name 1',
          id: 1
        },
        {
          displayName: 'name 2',
          id: 2
        },
        {
          displayName: 'name 3',
          id: 3
        }
      }
    },
    {
      id: 1,
      name: 'form 1'
      fields: [
        {
          displayName: 'name 1',
          id: 1
        },
        {
          displayName: 'name 2',
          id: 2
        },
        {
          displayName: 'name 3',
          id: 3
        }
      ]
    }
  ]
}

Answer №1

After attempting without the [0] at first, I finally found success with this method

option.displayName for option in (forms|filter: {'id': component.form.id})[0].fields track by option.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

Is there a way for me to open this tr link in a separate tab rather than in the current one?

Is there a way to open this link in a new tab? <a href="....." target="_blank"> This is how it can be done using JavaScript: <script> $(document).ready(function(){ $('table tr').click(function(){ window.open($(this).att ...

Angular Directive Issue: Custom ngModelController parser fails to execute

Utilizing formatters and parsers within my directive allows me to transform data in the following way: //format text going to user (model to view) ngModel.$formatters.push(function(value) { return value.toUpperCase(); }); //format text from the user (v ...

Verify whether the element retains the mouseenter event after a specified delay

I recently implemented some blocks with a mouseenter and mouseleave event. <button onMouseEnter={this.MouseEnter}>hover</button> MouseEnter(e) { setTimeout(() => { // Checking if the mouse is still on this element // Pe ...

Can you distinguish between these two plunkers - one using AngularJS and the other using Angular-UI?

I'm currently facing a challenge while trying to incorporate the ui-bootstrap project into my own project. Despite having successfully used ui-bootstrap before, I seem to be making mistakes this time around. The Plunkers linked below showcase the issu ...

Is there a way to verify the content of a span and automatically guide the user elsewhere if it meets certain criteria?

Currently, I am facing an issue with adding Google authentication to my website as the redirect function is not working properly. As a solution, I plan to implement manual redirection using JavaScript in case the value of the span element is <span id= ...

The Javascript style.opacity function eliminates the leading zero from the input string

In my application, users have the ability to change the color of the background but not the pattern. They can adjust the background behind the pattern and the opacity of the pattern. Users are prompted to input a percentage, which is actually a number betw ...

Creating a duplicate of an array and placing it inside a struct: A step-by-step guide

In my possession is a structure. typedef struct Heap { int length; int size; int A[]; } Heap; My goal is to create a shallow copy of a specified array and store it within this structure. This way, any alterations made to the array or elements ...

Sinon's fakeTimers failing to trigger

I'm encountering an issue with sinon's fakeTimers while working in a setup that includes Marionette.js, underscore, and chai test runner. Strangely, when I place a breakpoint in Chrome and step through the code, my timer functions as expected. Ho ...

How to disable a debounce function in Angular JS after just one iteration

I recently came across a debounce function created for AngularJS in a tutorial. While it seems to work well, I must confess that I don't fully grasp the code behind it. My questions are: Could you please provide an explanation of how this debounce f ...

When the application is reloaded, will the localStorage data be reset or remain intact?

Looking for a way to store data consistently throughout my application, I've opted to use localStorage. However, I'm facing an issue where all the localStorage values are erased upon reloading the browser. Can someone shed some light on why this ...

Guide on showcasing the values from two text fields with autocomplete suggestions in a third text field

Hey there, I have a search form that takes values from two text fields and combines them to populate a third text field for querying. <form name="form1" method="post" action="" autocomplete="off" oninput="sea.value = password.value +''+ passw ...

Modify the property of an element within an array

I have an array of objects with a certain property. I need to perform some mathematical operations on this property and return a new array. However, my current approach does not seem to be working as expected. array.map(el => { el.count * 2; r ...

Having trouble parsing the get request using supertest

When testing get requests to my mLab app using supertest, I noticed an issue with the response. The regular GET request from Postman returns this: {"_id":"5b169a9951573c50d9682d52","text":"First test note","title":"Test1"} However, the response received ...

Leverage rootScope variables within my HTML configuration

Working with scope variables in our Angular HTML is quite simple. Here's an example: <!doctype html> <html ng-app> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> ...

What is the process for sending an email to a designated recipient through an HTML form and then storing it as a record in an HTML table?

<!-- Placeorder part --> <div data-ng-show = "isPlaceOrder"> <div class = "col-lg-10" style = "margin-top:80px"> <div class="panel panel-primary"> <div class = "panel-heading">Drug Request Mail Sender</div&g ...

Using JavaScript to call a PHP file as the source file

I'm curious about the scenario where a .php file is called as a javascript. What does this signify and in what situations would it be necessary to use such an approach? Example: <head> <script src="dir/myphpfile.php" type="text/javascript" ...

Hover to stop menu movement

Can someone help me achieve a similar menu hover effect like this one? I'm trying to create a menu with a hold/pause effect on hover, specifically in the section titled "A programme for every vision". The goal is to navigate through the sub menus smo ...

Trouble with triggering HTML5 FileReader() functions

I'm having trouble determining why neither readSuccess() nor readFailure() are being executed in the code snippet below: function readMyFile(){ var reader = new FileReader(); reader.onload = readSuccess; reader.onerror = readFailure; ...

`Where can I find instructions on splitting an item into a byte[]?`

Is there a better way to convert an object, specifically a Parcelable bundle, into a byte array? The method I was using seemed fine, but it turns out it wasn't as effective as I thought. Previously, this is how I was attempting to achieve it: public ...

The operation malfunctions if the variable input is below 50, causing it to produce inaccurate results

The function "calcFinalTotal()" was created to calculate the post-tax discount on a purchase of items that were previously totaled and stored in an input tag with the ID of "totaltaxamount". This function applies a 10% discount to orders between $50 to $ ...