Loop through the items in the map and only display the filtered entries using ngRepeat

Recently, I implemented an ngRepeat on a Map to iterate through "(key, value)" pairs. However, I encountered an issue where I needed to write a filter to restrict certain results. This filter was designed to accept two parameters. One parameter is passed in the ngRepeat call, so logically I should receive two parameters. The manually passed parameter is a boolean value. Upon inspecting the debugger, both parameters were set, with the second parameter being "true", as expected. Therefore, I anticipated the first parameter to correspond to my "(key, value)" pair. To my surprise, the first parameter returned an empty Object.

In my HTML code, the reference looks like this:

<div ng-repeat="(name, thing) in thingMap | limitThings:showOnlyFailed">

The "thingMap" functions as a map that uses the "name" property as keys and "thing" objects as values.

Below is my filter definition, outlining what I had initially thought the first parameter would contain:

thingModule.filter("limitThings", ['ThingsService', function(ThingsService) {
return function(entry, showOnlyFailed) {
    return !showOnlyFailed || ThingsService.anyFailuresInList(entry.thing);
};
}]);

However, upon debugging, the value of "entry" turned out to be just "Object {}".

Answer №1

The entry argument represents the thingMap. If the object is empty, then your thing map will be empty as well.

I have developed a demonstration on Plunker: http://plnkr.co/edit/abcdef?p=preview, showing that the hash map of your things is correctly passed.

Answer №2

I agree with just-boris's point, but I have made some adjustments to his example to ensure clarity. When using ng-repeat with an object, the entire object is sent to the filter, rather than each individual entry.

In my case, I performed filtering using angular.forEach based on a 'failed' property within the object's value.

Check out the modified example here

app.filter('limitThings', function() {
  return function(entry, showOnlyFailed) {
    console.log("Entry: " + entry + " Show Only Failed: " + showOnlyFailed);
    var filteredMap = {};
    angular.forEach(entry, function(value, key)
    {
      if(!showOnlyFailed || !value.failed)
      {
        filteredMap[key] = value;
      }
    });
    return filteredMap;
  }
}); 

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

Simulating a traditional table scroll function on a window using virtualization

I am currently attempting to incorporate a virtualized table in react using react–virtualized, but I am facing issues with the rendering of the table. I am seeking to understand the root cause for this problem as well as find solutions for other overlapp ...

JavaScript function replicating its own code with each execution

After running my function in the desired way, where I open the context menu and then click the button, I notice an interesting behavior. The first time I run it, I see my desired result. However, every subsequent time I run it, the success message is displ ...

Perform an Ajax request upon clicking on the dropdown list item

I recently created a drop-down list using some JavaScript code. Here's how I did it: <script> $('.menu').dropit(); </script> <ul class="menu"> <li> <a href="#">Product_name</a> ...

"Implementing a feature to dynamically load Blogspot post content using JSON upon user

$.ajax({ url: 'https://uniquewebsite.com/feeds/posts/default?start-index=1&max-results=2&alt=json-in-script', type: 'get', dataType: "jsonp", success: function(data) { var entry = data.feed.entry; ...

What is the best way to transfer the array from my function and have it returned?

I've been struggling to successfully pass my array to an external function. Can anyone help me with this? You can find the code that I'm working on in jsbin: https://jsbin.com/kugesozawi/edit?js,console,output. The expected result should be passe ...

Tips for utilizing canReuse and routerOnReuse in Angular 2

I've reviewed the information provided in this link, but I'm still unsure about how to effectively utilize it. My requirement is straightforward—I need to update a parameter in the URL without constantly sending API requests, which are current ...

Utilizing document.write() for displaying markup content

I have an inline SVG stored as a variable on my webpage and I am making some changes to it. How can I display viewText on the page (not the SVG image) with the modifications? What is the best way to make viewText appear on the page? For instance: ...

transmit a binary image to a modal using Angular

I am facing an issue with my code where I am unable to pass a binary image to a modal. The image displays correctly as a jpeg in the view, and I need it to display the same way in the modal as well. View <h4 style="color: #3953a5; font-size:22px;"&g ...

Manipulate the default option in a Select field with JavaScript

I'm currently working on a WordPress post editing page and I need to set up a target link: By default, the option is set to "None", but I want to change it to "Custom Link..." with the following details: <select name="imt_team_href" onchange="imt ...

What is the best way to seamlessly incorporate a new line into the string saved in the AMP state?

I am exploring the world of Accelerated Mobile Pages and trying to enhance my skills. My current challenge involves adding a new line and some additional text content to a string stored in the amp-state when the user clicks a button. Here is what I have at ...

When the @change event is triggered, Vue data objects do not exhibit reactivity

Trying to figure out why the msg and show data parameters are not updating when triggered by @change. To ensure that these parameters are only updated upon successful file upload, I placed them inside the lambda function of onload: reader.onload = functio ...

Troubleshooting: Resolving the "npm ERR! missing script: start" Issue

I'm encountering the error below: npm ERR! missing script: start npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\..\AppData\Roaming\npm-cache\_logs\2019-04-27T18_02_39_6 60Z-debug.log Th ...

Top tips for resolving Swiper Js initial loading issues in a Carousel!

After implementing swiper js from , I encountered an issue. The initial loading displays only a single carousel item before the rest start appearing, creating a glitchy effect. To clarify, when the website is loaded, only the first item is visible in the ...

Styled-Elements Text or Passages

Can we apply styling to text or paragraphs with styled-components? And if so, how can we insert text into the component? For instance, consider this Footer component: const Footer = () => ( <footer className="site-footer"> <p className= ...

What could be causing the chart to fail to load after I switch the JSON file

Today was my first day using highcharts and I ran into an issue when trying to use their provided code. When I changed the url of the json file, the graphic stopped loading. Original code: $.getJSON('https://www.highcharts.com/samples/data/jsonp.ph ...

Error: GraphQl files cannot be imported due to incorrect relative directory path

I am attempting to bring in a mutation from my GraphQL file into my LoginPage file using the following code: import LoginMutation from '../../graphql/login-mutation'; Unfortunately, I am encountering an error that states: import LoginMutation ...

Adjusting the URL variable based on the selected checkbox option

My mobile website offers users the option of a bright or dark interface using a checkbox styled like an iPhone IOS7 switch. The functionality is working as expected, but I'm now facing an issue with passing the status of the checkbox between pages. I ...

Guide to making a custom scoreboard in JavaScript for my gaming application

Being a beginner in coding, I've been working on a Battleship-like game. I've managed to do most of it, but the scoreboard isn't functioning. I'd appreciate any guidance on how to fix it or what changes are needed for it to work properl ...

Button Hover Effect: Transition with Style

I am trying to implement a one-second transition from the default color scheme to the hover color for a Button element in Material UI. I am using the transitions.create(props, options) method as described in this article: https://medium.com/@octaviocoria/c ...

A step-by-step guide on accessing the Twitter API using AngularJS

Is there a way to integrate the Twitter API in an AngularJS application? $http.get('https://api.twitter.com/1.1/search/tweets.json).then(function(response){ $scope.tweets = response; }, function(err){ }); ...