Displaying an array of data using ng-repeat, only showing records where the value is found within a field of another object

Within my project, I am working with two types of objects: 'ing' containing fields 'id' and 'field', and 'fObj' containing a field named 'contain'.

Using ng-repeat, I am trying to display only those 'ing' objects where ing.id is included in fObj.contain.

For example:

ing=[{id: 1,field: value},{id:2, field: othervalue},{id:3, field: cat}];
fObj={field1: value1, field: value2, contain: ':1:3:'};

With the given contain value, I aim to display only ing objects with id=1 and id=3.

Although I have tried converting numbers to strings, I am still unable to achieve the desired result.

I have experimented with custom filters, but none have yielded successful outcomes.

If you have any suggestions on how to solve this issue, I would greatly appreciate it.

Thank you.

javascriptangularjs

Answer №1

Inside your controller:

var idList = containerObj.contain.split(':');
// create an empty array for ng-repeat display
var displayedIngredients = [];

// go through the objects, check if the id is in the list of id's 
// obtained from the split
for(i = 0; i < ingredients.length; i++) {
    if(idList.indexOf(ingredients.id.toString()) displayedIngredients.push(ingredients[i]);
}

Answer №2

To enhance performance, I would extract the numbers from fObj.contain; and use them as keys in a hashmap object to easily filter the array.

var ing=[{id: 1},{id:2},{id:3}];
var fObj={contain: ':1:3:'};

var IDs = fObj.contain.split(':').reduce(function(a,c){
  a[c]=true;
  return a;
},{});
// generates {1:true,3:true}
    
var filtered = ing.filter(function(item){
  return IDs[item.id];
});
console.log(filtered)

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

Guide on implementing text/ng-template script section in jsfiddle

My current challenge involves creating a jsfiddle that utilizes AngularJS to display two calendar controls. While my code functions properly when run locally, I've encountered an issue with including the template code via a script tag on jsfiddle: ht ...

javascriptangularjsjsfiddle

What is the best way to effectively carry out a partial update using ReactJS?

During a recent job interview, the recruiter discussed the importance of handling partial updates and managing application size. As an example, he presented a Single Page Application (SPA) with a size of 8MB, which he deemed less than ideal. He emphasize ...

javascriptreactjsperformancesingle-page-application

Error: The function wrapper.find().simulate('keypress', {key: 'Enter', keycode: 13}) is not working as expected

Let's discuss further about this query vue-btn isn't triggering on pressing the enter key I have designed a sign-in page where users can log in by pressing 'Enter' on the keyboard. Now, I aim to perform a unit test that simulates pres ...

javascriptvue.jsjestjs

Having trouble launching the emulator in VS Code for React Native?

I'm having trouble launching the android emulator on VS Code to run React-Native. I already have an emulator set up in Android Studio, but when I try to launch it, I get the error message: Error Failed to launch emulator. Reason: No emulators found as ...

javascriptandroidnode.jsreact-nativeandroid-emulator

Error: Unable to set reference. The initial argument includes an undefined value in the 'gender' property of 'Users.ji8A7TkSldfdvieDqGxko9eV3Jy1'

I followed along with a Firebase Web Tutorial on YouTube about adding data to Firebase Database for an account settings tutorial. However, when I tried to implement the code provided, it didn't work. Can anyone offer any assistance? // Code snippet fo ...

javascriptfirebasefirebase-realtime-database

Formulate a multi-line string using a collection in React's JavaScript framework

I'm working on a React function that involves a set and I need to update an HTML element using the data from this set. Below is an example of my code: const updateElement = (mySet) => { document.getElementById('myId').innerHTML = Arra ...

javascripthtmlreactjstypescript

Initializing Angular variables

My Angular controller has a variable called $scope.abc. The backend I'm using is Sails. The initial value of $scope.abc can be set by the backend when the page is first generated. Once the page is displayed, the user may or may not change this value ...

javascriptangularjssails.js

Is a promise already included in Angular 1.4's $http for HTTP GET requests, or do I need to create my own?

My mind is getting all tangled up the more I delve into online materials about $q and $http. If I make a $http.get call, does that automatically involve a promise? Should I also use $q in this scenario? ...

angularjspromise

Seems like ngAfterViewInit isn't functioning properly, could it be an error on my end

After implementing my ngAfterViewInit function, I noticed that it is not behaving as expected. I have a hunch that something important may be missing in my code. ngOnInit() { this.dataService.getUsers().subscribe((users) => {this.users = users) ; ...

javascriptangulartypescript

Jest and Enzyme failing to trigger `onload` callback for an image

I'm having trouble testing the onload function of an instance of the ImageLoader class component. The ImageLoader works fine, but my tests won't run properly. Here's an example of the class component: export default class ImageLoader extend ...

javascriptreactjsjestjsenzymejsdom

Using JQuery with special characters in attributes

Within my jQuery script, I am required to dynamically translate certain content. As a part of this function, I have the following code: $('#password').attr('placeholder', 'Contrase&ntilde;a'); In this code snippet, I att ...

javascriptjqueryhtml

Is there a way to enlarge the font size for a complete tag?

I'm having trouble with a project. One of the tasks is to use jQuery or JavaScript to increase the font size of a paragraph. The console statements are incrementing by +1 with every mouse click (the first click adds 1, the second adds 2, and so on). ...

javascripthtmljquery

How to prevent click events and still enable scrolling within a DIV using CSS/JS

Basically, I am looking to enable scrolling within a DIV while also disabling click events. Any suggestions on how this can be achieved? Appreciate any help! ...

javascriptjquerycss

When the input CTRL+C is entered in the console, Node.js / JavaScript will output

I have a script that I use to restart another script. Here is the code snippet: catch(err){ console.log(err) webhook.send(`Error monitoring **www.-.com**, restarting monitor.`) await browser.close() await sleep(monitorDelay) return chec ...

javascriptnode.jspuppeteercheerio

Issue with conflicting trigger events for clicking and watching sequences in input text boxes and checkboxes within an AngularJS application

When creating a watch on Text box and Check box models to call a custom-defined function, I want to avoid calling the function during the initial loading of data. To achieve this, I am using a 'needwatch' flag inside the watch to determine when t ...

javascriptangularjscheckboxangularjs-scopewatch

What is the best way to delete and add elements in a looped array using Javascript

i have a form similar to this one. https://i.sstatic.net/V7ivb.png how can I replace this form each time the country changes, by removing it and then appending it again from a looping array. If there is only one set of data, display an "Add Form" Button; ...

javascripthtmldomdom-manipulation

How to handle HTTP errors with Airbrake in AngularJS

I have set up airbrake to report errors, but it does not seem to be capturing HTTP errors. I am attempting to adjust the configuration to include these errors. Below is the code snippet for my factory: import AirbrakeClient from 'airbrake-js'; ...

angularjshttp-errorairbrake

Retrieving data from a React state in one component and utilizing it in a separate component

Thank you for taking the time to assist me with this challenge. I am currently working on a project that involves creating the state goodData in one component called AddProduct and accessing it in another component named ActionBox, both within the same j ...

javascriptreactjswebreact-hooks

Include various categories into the div containers of the listed items within the query outcomes

Is there a way to customize div styles based on query results? I want to differentiate the styles of divs in the result list based on their content. For example: I'd like bird names in the result list to have different div styles compared to other a ...

javascriptphpjqueryhtmlcss

"AngularJS Bi-Directional Data Binding Issue: Unexpected 'Undefined

Recently, I've been tackling a project that involves using a directive. Initially, everything was smooth sailing as I had my directive set up to bind to ngModel. However, I hit a roadblock when I needed to bind multiple values. Upon making the necessa ...

javascriptangularjsbindingdirective