Challenge with using ng-repeat and groupBy together

Let's say I have an array called users structured like this:

$scope.users = [
    {
        "name": "foo",
        "status": "pending"
    },
    {
        "name": "bar",
        "status": "pending"
    },
    {
        "name": "baz",
        "status": "active"
    },
    {
        "name": "qux",
        "status": "confirmed"
    }
]

My goal is to create a grouped list based on two different status properties. The desired output would consist of the following two lists:

List 1

pending, confirmed
-> foo, bar, qux

List 2

active
-> baz

Currently, I am using the following code snippet:

ng-repeat="(key, value) in users | groupBy: 'status'"

However, this approach results in three separate groups (confirmed, active, and pending) rather than the required two as mentioned above.

Is there a way to merge the two statuses within this ng-repeat loop?

Answer №1

here is the solution:

ng-repeat="(key, value) in users | groupBy: 'status'" | toArray:true

Answer №2

To achieve this separation, you can handle it within your controller and let the view display the result accordingly. This way, you can use two different ng-repeats, one for users with pending or confirmed status and another for users with active status.

// For demonstration purposes, I am using a scope object here
// In an actual scenario, you would inject the scope in your controller
var $scope = {};

$scope.pendingConfirmed = [];
$scope.active = [];
var users = [
    {
        "name": "foo",
        "status": "pending"
    },
    {
        "name": "bar",
        "status": "pending"
    },
    {
        "name": "baz",
        "status": "active"
    },
    {
        "name": "qux",
        "status": "confirmed"
    }
];

for(var i=0; i<users.length; i++){
    var user = users[i];
    if( user.status === "pending" 
     || user.status === "confirmed" ){
        $scope.pendingConfirmed.push(user);
    } else {
        if( user.status === "active" ){
            $scope.active.push(user);
        }
    }
}


console.log('-- Pending or Confirmed --');
console.log($scope.pendingConfirmed);
console.log('-- Active --');
console.log($scope.active);

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

Reply to changes in the window size *prior to* adjusting the layout

Take a look at the "pixel pipeline" concept illustrated with a vibrant diagram on this page. I am currently working on resizing an element (let's say, a span) dynamically when the browser window is resized. I have implemented this using window.onresi ...

Tips for creating a visual map using a URL

Here is a code snippet that I found: https://openlayers.org/workshop/en/vector/geojson.html The code requires a URL to a countries.json file, like this: url: './data/countries.json' When I run the code, only zoom in and zoom out buttons appear ...

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicked on?

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicking anywhere on the page? <table id="view_table" data-toggle="table" data-search="true" data-page-list="[5, 10, 20]" data- ...

Tips for incrementing a number by 1 at random intervals using jQuery

Is there a way to increase a number by 1 after an unpredictable delay? For instance, starting with a base value of 10, can we have it change by 1 after a random amount of time (e.g. between 1 and 5 seconds)? I attempted the following code: var ...

ReactJs - Minimizing unnecessary re-renders caused by context changes - A step-by-step solution

I've been working on my website at , and I came across an issue that I can't seem to solve. I created a custom cursor along with a CursorContext to change its state on hover, but every time the context changes, all components in my app are re-ren ...

What is the best way to display a jpg image file stored on an SD card using PhoneGap?

My goal is to display a jpg image from the data directory of an Android phone, not a photo taken by the camera. Here's the code I've worked on so far: document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady(){ ...

Error: An error was detected due to a missing closing parenthesis after an argument list while attempting to utilize

Attempting to condense a string using the LZMA-JS library available here. This is how my javascript code looks: var reader = new FileReader(); reader.addEventListener("load", function () { var big_code = reader.result; console.log(big_code.lengt ...

Tips for adjusting the <object> video to perfectly match the width and height of its parent container

<div id="player" width='2000px' height='600px'> <object id="pl" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"> <param name='url' value='Video/3.mp4'/> <param name='ShowContro ...

Tips on how to successfully hand over properties in Vue Router

Hey there, I've been working on passing props in Vue routes and have made some progress but it's not quite what I want. What I have so far route.js { path: '/register/', name: 'register', component: require(&apo ...

Height Setting for Angular Material Buttons

html: <body id="app"> <md-button> Yo </md-button> </body> Looks: Why is the button set to 100% height? It should look like an inline element according to the materials documentation here. Also, why aren't the materi ...

The jQuery window.load() function fails to execute on iOS5 devices

I added a basic loading div to my website that fades out once the entire page has finished loading. The code I used is simple: $(window).load(function(){ $('#loading').fadeOut(500); }); While this works well on all desktop browsers and Chro ...

Ways to determine if an array with a mix of data types includes string values

Challenge I'm Currently Tackling: To solve this challenge, create a function named "findShortestWordAmongMixedElements". The task is to find and return the shortest string from an array that contains mixed element types. Important Notes: * In c ...

The functionality of Angular material allows for a side navigation panel to be

I am a beginner with angular material and have a query regarding the possibility of implementing a sidenav modal. Today, I experimented with the sidenav and it functioned perfectly. However, I am looking for another option where I can prevent the sidenav ...

Show additional links beneath the main homepage URL in search engine result pages

Seeking a way to optimize search engine results to display sub-links under the main homepage of a website. Attached is a screenshot illustrating the desired outcome when searching for a particular term. Appreciate any insights or solutions on achieving thi ...

How can React Native efficiently retrieve data from multiple APIs simultaneously?

In my current project, I am incorporating multiple APIs that are interlinked with each other by sharing the same data structure... Below is the code snippet: export default class App extends React.Component { constructor(props) { super(props); } ...

Steps to stop POST requests sent via AJAX (acquired through Firebug)

Is there any way to protect against users spamming a post request? Consider a scenario where a form is submitted through an Ajax post. I've observed that the post request can be duplicated by simply right clicking on it and choosing "open in a new tab ...

Ways to integrate search features into the SearchAppBar within Material UI?

Currently, I have a simple react application that enables users to search for and view movies from the Movie Database API. However, I am facing an issue: I want to connect my custom React Function SearchMovies() to a specific material ui component known a ...

What methods does React Router use to extract typed parameters from path strings?

(This question is about understanding functionality, not asking for a step-by-step guide) While using React Router, I noticed that Vscode IntelliSense can offer strongly-typed suggestions when I input parameters in a route like this: <Route path=&apos ...

Display information from Node.js on an HTML page

I am working on a nodejs project where I need to login on one page and display the result on another page using expressjs. Below is my code for login.ejs: <!DOCTYPE html> <html lang="en" dir="ltr"> <body> <form method="PO ...

utilizing BrowserRouter for dynamic routing in react-router-dom

I'm currently facing a challenge with creating a multi-tenant SaaS solution. Each tenant needs to be able to use a subdomain, so that I can extract the subdomain from the URL and make a call to a REST API to retrieve data specific to that tenant. For ...