Custom Angular filter for comparing two numbers within an ng-repeat loop

Our Angular project involves working with an array named data that contains:

$scope.data= [
    {_id: '1', rev: 1-bar}, 
    {_id: '2', rev: 2-bar},
    {_id: '3', rev: 3-bar},
    {_id: '4', rev: 4-bar},
    {_id: '5', rev: 1-bar},
    {_id: '5', rev: 2-bar},
    {_id: '5', rev: 3-bar}
];

In the HTML code, we have:

<div ng-repeat="items in data | unique: '_id'">

 {{items._id}}


</div>

We are currently using an Angular filter called unique to display only one item for each unique _id. However, the filter does not account for revisions. As a result, changes made do not reflect until the page is reloaded. We need a solution to showcase only the _id with the highest revision.

Your assistance on this matter would be greatly appreciated!

Answer №1

Arrange by ID and organize in reverse order based on revision number, then pick the initial item.

<div ng-repeat="(id, info) in dataset | groupBy: '_ID'">
   {{info|min: 'rev'}}
</div>

Give it a shot!

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

Which is causing the block: the event loop or the CPU?

example: exports.products = (req, res) => { let el = 1; for (let i = 0; i < 100000000000000; i++) { el += i; } console.log(el); ... ... ... res.redirect('/'); }; If I include a loop like this in my code, which resour ...

I'm encountering an issue with ESlint in my Vue.js project that I just can't seem to resolve

A couple of months back, I encountered this issue within my vue.js project. The error seems to be originating from lines 22, 23, and 24, which correspond to lines 45, 46, and 47 in the code block below. { "resource": "/C:/Users/Demo User ...

The XML data does not provide any website addresses

After inputting all possible parameters and data into a URL, XML is not being returned. The locally hosted XML works fine, but not when using a URL. HTML: <section ng-controller="AppController" class="container-podcastapp"> <ul> ...

Creating unique appbars for different sections on my sidebar in ReactJs

I am trying to implement a responsive drawer and AppBar using material-ui (@material-ui/core). My goal is to display a specific AppBar for each section of the drawer. For instance, when the user navigates to the Timetable section, I want the AppBar label t ...

Use Cypress to retrieve a token from an API, store it in local storage, and then use it in the header of another API request. Once the token is successfully incorporated, capture and return the

There is an API (referred to as getToken) that generates a token in its response body. This token is then called and stored in the header of another API (known as returnBody). It seems logical to utilize localStorage for the getToken API since the token ca ...

I'm completely baffled as to why the client console is unable to locate my JS file

I have a question that may seem basic, so please bear with me! I'm having trouble adding a js file to an html page and it seems to be related to the file path. In my HTML page, I have this code to link the file: <script src="../src/utils/mapbo ...

Implementing an import statement in an Electron renderer script

After following the Electron typescript quick-start code structure by cloning the repo, everything worked fine. However, when attempting to split my code into multiple .ts files and import them into the renderer script, I encountered an issue. Upon adding ...

Exploring Node.js: Managing Memory Consumption for Efficiency

I'm currently setting up multiple Node applications on one server, and I'm particularly worried about memory usage. Is there a specific amount of physical memory needed for a basic Node.js express service to run? Also, is there a method to limit ...

What is the best way to incorporate a function that works seamlessly with elements?

For the elements with corresponding 'li' that has a selected class, I need to set the selected property only for those specific 'option' elements. The value is determined by the data-input-value attribute in the 'li' and the v ...

Add the element to a fresh array only if there are no duplicate values present

I am faced with a challenge involving an array of names where duplicate entries, such as "Kenny," are causing some confusion. I only want each name to be included in the new array once, but I'm struggling to achieve this. Here's my progress so fa ...

Utilizing Ajax to Invoke Wordpress Functions from a Client's Browser

Currently working on setting up a WordPress website integrated with WooCommerce, while also developing an HTML5 app for my small online store. I am looking to utilize Ajax to call WordPress functions like search directly from my HTML5 app and receive the r ...

Expressing the relationship between API endpoints in a nested structure

I'm currently working on a REST API using expressjs. There are two api endpoints that I have defined: router.get('/probe/:id', function() {}); router.get('/:id', function() {}); However, I am facing an issue where calling the fir ...

Empty $_POST variable in AJAX POST request

I attempted to find a solution in a similar forum post, but unfortunately, it did not resolve my issue. Below is the Ajax Request code from my .js file: JavaScript Code $(document).ready(function(){ $(document).on('click', '.mySubmitTextBu ...

Can a promise be safely resolved more than once?

In my application, there is an i18n service that includes the following code snippet: var i18nService = function() { this.ensureLocaleIsLoaded = function() { if( !this.existingPromise ) { this.existingPromise = $q.defer(); var deferred ...

What is the best way to display information using Datatables in VueJs?

The data retrieved from the API is appearing next to the datatable instead of within it. In my Vuex actions, I am fetching an array of records from an API and returning the state (array) through getters to components where datatables are being used. impo ...

Every time I attempt to insert a button from Semantic UI into my code, I consistently encounter an error message that reads: "Error: Unable to locate node on an unmounted

Struggling with a side project utilizing a MERNG stack. Can't seem to successfully add a button from semantic UI react documents into my code, sourced from here. Despite multiple attempts, encountering an error without clarity on the root cause. GitHu ...

must deactivate a group of checkboxes

<div class="result-content"> <div class="table-container"> <table class="table-names"> <thead> <tr> <th></th> <th>Company Name ...

The function purported by WEBPACK_MODULE_13___default(...) does not exist

Scenario : I've been working on a small library (let's call it myLibrary) using TypeScript and Webpack. Everything seemed to be running smoothly until I imported the library into a React application, which resulted in a crash. On the Library Sid ...

Uploading two individual images within a single ng-flow application is not supported

I am currently utilizing the ng-flow file upload feature: https://github.com/flowjs/ng-flow It appears that there might be an issue either with my code or a certain bug. My project is based on the basic image template that comes along with the download. ...

Distinguishing between a save and update using a shared Angular JS template

Currently, I am engaged in a project that involves a PHP backend and Angular 1.x on the front end. Within this project, there is a Listings model used in conjunction with a common template for both adding and editing Listings. The challenge lies in distin ...