"An ng-repeat directive with a filter applied results in an empty

After successfully implementing the ng-repeat loop below:

<div ng-repeat="einschItem in einschaetzungen.alldata | filter: { savedatum: lolatage[tagarrayindex].tagestring } | orderBy : '-savetimestamp'">

I wanted to check if the filtered result is empty. Upon researching, I came across a solution that seemed promising:

<div ng-repeat="einschItem in einschaetzungen.alldata = (values | filter: { savedatum: lolatage[tagarrayindex].tagestring } | orderBy : '-savetimestamp')">

{{values.length}}

However, when I implemented this code, the "einschItem" variable turned out to be empty and no results were displayed in the loop.

Your assistance would be greatly appreciated!

Just for reference, my angular version is v1.4.6.

javascriptangularjsangularjs-ng-repeat

Answer №1

If you want to alias the results of the repeat, you can do so by using the following syntax as specified in the Angular Documentation:

variable in expression as alias_expression
– This allows you to store the intermediate results of the repeater after applying filters.

For example: 

item in items | filter:x as results
will save the filtered result set as 'results'.

It's important to note that as [variable name] is not an operator but part of ngRepeat micro-syntax and should only be used at the end of an expression.

For instance: 

item in items | filter : x | orderBy : order | limitTo : limit as results
.

To implement this in your case:

<div ng-repeat="einschItem in einschaetzungen.alldata | 
               filter: { savedatum: lolatage[tagarrayindex].tagestring } |
               orderBy : '-savetimestamp' 
               as filteredItems">

{{filteredItems.length}}

Keep in mind that this approach achieves the same functionality as mentioned in another solution provided earlier; it simply offers an alternative using ngRepeat micro-syntax.

Answer №2

It seems that the order of values and einshaetzungen.alldata has been mixed up.

The correct approach is to assign the filtered list to a variable and then iterate through it.

<div ng-repeat="einschItem in values = (einschaetzungen.alldata | filter: { savedatum: lolatage[tagarrayindex].tagestring } | orderBy: '-savetimestamp')">

{{values.length}}

Check out this example for reference.

If you are using Angular version 1.3.17-beta or newer, you can also use the alias formatting as shown in Claies' answer.

<div ng-repeat="einschItem in einschaetzungen.alldata | 
               filter: { savedatum: lolatage[tagarrayindex].tagestring } |
               orderBy : '-savetimestamp' 
               as filteredItems">

{{filteredItems.length}}

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

Problem detected in id modification

My JavaScript function is triggered with an onChange event, which works fine when there's only one. <input class="form-control" type="text" onchange="opert(<?php echo $fetch["id_prod"] ?>,1)" id="name" value="<?php echo $fetch["name_prod" ...

javascriptarrays

Undefined response received when parsing JSON data

Hey there, I'm currently working on an ajax request that submits a form and sends an email. If the email is successfully submitted, I encode a PHP array that has a structure like this: $success = array("state" => "Email Sent"); My issue arises wh ...

javascriptajaxjsonjquery

In Vue, the concept of using the debounce method is not clearly defined

I am aware that using the arrow syntax for a method can cause 'this' to not be mapped to the Vue instance. In my case, I am utilizing lodash.debounce and I don't think I'm using the arrow syntax here? Encountering Error: Cannot read pr ...

javascriptvue.jslodash

Experiencing difficulty with parsing an array's json/string version within an Angular controller

Updated question for clearer understanding! I'm currently working on an Angular-Rails application and facing challenges when it comes to parsing an array. One of my ActiveRecord models has an attribute that is an array. Before reaching my Angular app ...

javascriptruby-on-railsangularjsjson

Chrome's rendering of CSS flex display shows variations with identical flex items

I am facing an issue with my flex items where some of them are displaying incorrectly in Chrome but fine in Firefox. The problem seems to be with the margin-right of the rectangle span within each flex item, along with the scaling of the text span due to f ...

javascripthtmlcsslayoutflexbox

I am interested in swapping out the text links in a menu for images

Looking to swap out text links in a menu for images, but stuck with template constraints generated by rapidweaver. The HTML template can't be modified, except for the link text itself. For example: <a href="http://truehealth.gr/eng/" rel="">!UK ...

javascriptjquerycss

Ways to verify if a value already exists in a pre-existing JSON file using Node.js

On the backend side, I have a json file containing addresses. From the client side, I am receiving a user's address through an API post method. My goal is to verify if the address provided by the user already exists in the JSON file. The addresses in ...

javascriptjsonnode.js

RxJS Observables trigger the onCompleted function after completing a series of asynchronous actions

I have been attempting to design an observable that generates values from various asynchronous actions, particularly HTTP requests from a Jenkins server, which will notify a subscriber once all the actions are finished. However, it seems like there might b ...

javascriptasynchronousrxjsobservable

How to dynamically load a component within a class-based Vue component

I am facing an issue with loading two components dynamically using an object map. Info (options-based) SearchBar (class-based) While it works for the options-based component, I encounter an error stating _currentTab is undefined when trying to load a si ...

javascripttypescriptvue.js

Certain mobile devices experiencing issues with AngularJS filters

Currently, I am attempting to filter an AngularJS array by utilizing custom filters within a controller. The filters are functioning correctly on certain mobile devices, yet they are not working on others. Here is the code snippet that I am using: var a ...

javascriptjqueryarraysangularjsangular-filters

Encountering the error message ERR_CONNECTION_TIMED_OUT while using Vue CLI

Currently, I am venturing into the world of Vuex and attempting to incorporate some API requests using this state management pattern. Here is the structure I have set up: Component.Vue export default { created() { this.$store.dispatch('getDat ...

javascriptvue.jswebpackvue-clivuejs3

In the strict mode tree, a reference named "grid" has been discovered

I encountered the following warning in the console: Warning: A string ref, "grid", has been found within a strict mode tree. String refs can potentially lead to bugs and should be avoided. It is recommended to use useRef() or createRef() instead. T ...

javascriptreactjs

What's Next? Redirecting Pages in Node.js Express after Handling POST Requests

Is it possible to redirect to a different page from a post request? module.exports = function(app) { app.post('/createStation', function(request, response){ response.redirect('/'); //I'm having trouble getting ...

javascriptnode.jsexpressnpmdao

Encountering an issue while updating information following the migration to vue-chartjs 4

I recently upgraded from vue-chartjs version 3 to version 4. I successfully migrated my LineChart component by updating the template section and removing the draw method calls. This component is utilized for two separate charts. However, when I close the ...

javascriptvue.jschart.jsvue-chartjs

The instance is referencing the property or method "sendResetMail" during render, but it is not defined

I'm pretty new to Vue and struggling with an error message while trying to get a reset email modal working in my Vue project: The error says that the property or method "sendResetMail" is not defined on the instance but referenced during render. I ...

javascriptvue.jsvuejs2

Utilize Multer to upload images stored within an array of objects

I've been having difficulty figuring out how to extract the images from an array of objects structured like this: import mongoose from "mongoose"; const prodcutSchema = new mongoose.Schema( { title: { type: String, require ...

javascriptnode.jsimageexpressmulter

jQuery is missing an essential component that is causing an error

I have successfully implemented the following JavaScript code and everything is working fine. However, I'm uncertain if my code is fully correct. I noticed that in my script, I only utilize success: function() without incorporating an error function. ...

javascriptjqueryajax

The NgFor is unable to iterate over an array because it is being treated as an

When attempting to call a new endpoint for displaying data, I noticed that the previous set of data is wrapped with an extra pair of brackets '[]', which seems to be causing a problem. The new endpoint does not format the data in this way when I ...

javascripthtmlangular

A malfunction report stemming from an HTTP error code while using react.js/javascript

In my react.js application, I have a Component that displays an error code. It currently looks like this: https://i.stack.imgur.com/2usiy.png Now, in addition to displaying just the code, I also want to show the reason for the error. Similar to how this ...

javascriptreactjshttp-status-codes

Initiate the Bull Queue Process upon launching the Application

As I develop my API, I am setting up a queue and adding jobs to it. Additionally, I have configured the API to start processing these jobs as soon as they are added. const newQueue = createQueue(queueName, opts); newQueue.add('JokesJob', data, o ...

javascriptnode.jsqueuebull.jsbull-queue