Prevent Cross-Array Data Usage in Angular Filter

I have two arrays - one with a complete list of data and another with only a few items. My goal is to filter out the data from the complete list that is not present in the second array and create a new array with the filtered results.

Below are the details of the arrays:

$scope.allparams = [{
    'tab': 'ADH',
    'title': 'Adhérent'
}, {
    'tab': 'ADH',
    'data': 'civilite',
    'lib': 'Civilité',
    'type': 'select'
}, {
    'tab': 'ADH',
    'data': 'nom',
    'lib': 'Nom',
    'type': 'text'
}, {
    'tab': 'ADH',
    'data': 'prenom',
    'lib': 'Prénom',
    'type': 'text'
}, {
    'tab': 'ADH',
    'data': 'dateNaissance',
    'lib': 'Date de naissance',
    'type': 'date'
}, {
    'tab': 'ADH',
    'data': 'nationalite',
    'lib': 'Nationalité',
    'type': 'select'
}, {
    'tab': 'ADH',
    'data': 'statut',
    'lib': 'Statut',
    'type': 'select'
}, {
    'tab': 'DET',
    'title': 'Détail comptable',
    'type': 'select'
}, {
    'tab': 'DET',
    'data': 'saison',
    'lib': 'Saison',
    'type': 'select'
}, {
    'tab': 'DET',
    'data': 'activite',
    'lib': 'Activité',
    'type': 'select'
}, {
    'tab': 'DET',
    'data': 'prix',
    'lib': 'Prix',
    'type': 'currency'
}];

if (exportService.getStockParams() !== undefined) {
    var stockParams = exportService.getStockParams(); // Second array filled with a method
}

Here is an example of the second array:

    [{
    "tab": "ADH",
    "data": "nom",
    "lib": "Nom",
    "ordersource": 2,
    "added": true
}, {
    "tab": "ADH",
    "data": "prenom",
    "lib": "Prénom",
    "ordersource": 2,
    "order": null,
    "added": true
}, {
    "tab": "ADH",
    "data": "dateNaissance",
    "lib": "Date de naissance",
    "ordersource": 2,
    "order": null,
    "added": true
}]

Please let me know if you require more information.

I am new to Angular and finding the filters challenging to understand. Any help would be appreciated.

Answer №1

To achieve this, you have the option to utilize the differenceWith method from lodash. Alternatively, you can achieve the same result without lodash by implementing the filter and every array methods.

const allItems = [
  {x: 1, y: 2},
  {x: 1, y: 5},
  {x: 1, y: 6}
];

const partialItems = [
  {x: 1, y: 5}
];

const differentItems = findDifference(allItems, partialItems);

console.log(differentItems);

function findDifference(mainItems, subItems) {
  return mainItems.filter((item) => {
    return !subItems.every((subItem) => JSON.stringify(subItem) === JSON.stringify(item));
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

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 is the most efficient way to implement OR conditions in JavaScript for shorter code

Hello there! I have a question about optimizing conditions in code. Is there a more elegant way to write the following conditions? state === 'su' || state === 'ja' || state === 'fa' I was thinking if it could be simplified ...

Execute function after AngularJS returns data

My dilemma revolves around calling a callback function while struggling to retrieve the necessary data due to an error in my method. Here is what I have attempted: //function with callback filterList: function(type, cb) { if (type == 'all') { ...

Selecting objects using a mouse pointer in Three.js

Is it possible to implement mouse picking on imported 3D models like a .obj file in Three.js? I've found plenty of tutorials for default objects, but I'm struggling to display a sphere at the exact position where the user clicks the model. Can an ...

Determine whether to deliver compressed or uncompressed js and css files by utilizing url parameters in AngularJs and Grunt

Exploring the world of AngularJS and Grunt is a new adventure for me. I am currently in the process of setting up the front-end environment and am looking for a way to serve either compressed or uncompressed js and css files based on specific url parameter ...

I have implemented the Angular "Date" filter, but I'm unsure about the meaning of this numerical value

The Angular tutorial showcases the date filter with the following example: {{ 1304375948024 | date }} --> May 2, 2011` How would you notate the expression 1304375948024? ...

How to Improve Performance for 15,000 Socket.io Users

I am facing an issue with my chat application that has large chatrooms, with 15,000 users connected to a single room. Only a few have the privilege to write messages, so in theory, there should not be a significant load on the server. However, I have obser ...

Using a JavaScript function, transmit information through an Express response

I am working on sending an application/javascript response from my Express server, utilizing data retrieved from MongoDB. This response is intended for loading content on a third party website. All components of the process have been developed, and now I ...

Troubleshooting Problem with CSS and Javascript Dropdown Menu

Greetings, fellow web designers! I am relatively new to the world of web design and currently, I am immersed in the process of creating a website. My current project involves implementing a dropdown menu using CSS and Javascript. While I have made signific ...

How to consistently show a number with four decimal places in an <input> using Angular

Is there a way to ensure my float value for the ng-model is always displayed with 4 decimal places in the <input> element? <input type="number" name="myDecimal" ng-model="myDecimal | number : 4" /> ...

Angular schema forms allow users to make multiple selections at once through a

Having an issue with using a multiselect checkbox in a dropdown with Angular Schema Forms. My requirement is to disable another control based on a selected value, but I am unable to bind any events to the checking of a checkbox in the multiselect. Can so ...

acquiring specific array elements in Vue.js

Currently, I am integrating Vue.js in the frontend of a Laravel application and need to retrieve values from an array column and store them in a new array. Is there a method similar to PHP's array_column in Vue.js that can accomplish this task? ...

rxjs module is mysteriously missing in Visual Studio 2019, yet it can be easily located when using the t

I recently integrated TypeScript into an aging angularjs project with the intent of eventually transitioning to Angular 2+. In my TypeScript code, I am eager to utilize rxjs observables; however, I have encountered some unexpected behavior during my attemp ...

Exploring jQuery Mobile | Moving Seamlessly between Pages

I'm relatively new to JQM and I'm working on creating a mobile application using jQuery Mobile. Here's the goal I'm aiming for: I have multiple HTML pages, each with its own CSS, JavaScript, and JQM components. What I want is to be ab ...

How can I style the empty text in an ExtJS grid using CSS?

Is there a specific CSS class for a grid's emptyText? After inspecting the element with Firebug, all I found was: <div id="gridview-1021" class="x-component x-grid-view x-fit-item x-component-default x-unselectable" role="presentation" tabindex=" ...

What is the best way to utilize an AngularJS directive depending on the class assigned by ng-class?

I am currently facing a challenge in applying a directive to an element conditionally based on its class. To illustrate my issue, you can view the results in this JSFiddle link. In this example, I am using ng-class with true boolean values mapped to class ...

Is there a way to modify the package version with yarn, either upgrading or downgrading?

Is there a way to downgrade the version of a package using yarn's "dependencies" feature? ...

What makes the state display potential when utilizing Redux? Also, what is the best approach to access the array within the outcome?

Upon logging the state here, I noticed a promising result. However, I am struggling to access the array inside the promise outcome. I attempted using Object.keys and map but was unsuccessful. > import React, { useEffect, useState } from 'react&apos ...

What causes an object to declare itself as undefined only in the event that I attempt to access one of its properties?

Check out this snippet of code: req.Course.find({}).populate('students', 'username firstName lastName registered').populate('teacher', 'image mID firstName lastName').sort({title: 1}).exec(function(err, courses){ ...

How to retrieve a MySQL column in Node.js using template literals

I have been trying to retrieve a field from MySQL in my Node.js file using template literals, but I am struggling to get the value. In my post.controller.js file, you can see where it says message: Post ${body.post_id} was successfully created, with post_i ...

Having trouble grasping the concept of slicing a numpy array?

I'm encountering some confusion when slicing a Numpy array. In[87]: y Out[87]: array([[1, 2, 3], [4, 5, 6], [7, 8, 9]]) In[88]: y[0,0] Out[88]: 1 While y[0,0] returns 1, I was surprised that In[89]: y[0,0:1] Out[89]: array([1]) pro ...