Picking a specific field from an array depending on a filtered value

Question

Picking a specific field from an array depending on a filtered value

Hello everyone, I am a newcomer to Angular and the entire MEAN stack ecosystem.

Currently, I have a MongoDB database collection structured like this:

db.users({ 
    username: "Test1", 
    fname: "Bob", 
    lname: "Saget", 
    email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196d7c6a6d596d7c6a6d377a7674">[email protected]</a>", 
    password: "12345",  
    status: [{ 
        active: false, 
        "non-active": false, 
        suspended: true, 
        "un-confirmed": false, 
        banned: false 
    }] 
})

So far, I have been able to successfully display all users on the screen using the following code snippet:

        <tr ng-repeat="user in users">
            <td>{{user.username}}</td>
            <td>{{user.fname + ' ' + user.lname}}</td>
            <td>{{user.email}}</td>
            <td>{{user.password}}</td>
            <td></td>
        </tr>

However, my challenge arises when attempting to display the name of the field (e.g., 'suspended') from the status array based on its boolean value instead of displaying 'true'. Moreover, I only want to retrieve the records with true values (there will be only one in this case).

I have tried utilizing combinations of ng-if along with ng-repeat and filter:{} options without much success.

If necessary, I can provide additional details. How would you approach solving this issue?

Thank you very much in advance for any insights or guidance you can offer!

javascript angularjs mongodb

Answer 1

Answer №1

Once you have obtained the list of users, you can iterate through them and update their status as shown below.

angular.forEach($scope.users, function(a, b){
  var user = a;
  var status = a.status[0]; // <-- since status is an array, we select the first one.
  for (var k in status) {
    if (status.hasOwnProperty(k)) {
      if (status[k]) { // <-- if status is true, retrieve the key.
        user.status = k; // <-- set the user's status object to the key.
      }
    }
  }
});

You have the freedom to change user.status = k to any desired value; setting it to status will overwrite the existing status array.

Check out this working example -> http://jsbin.com/zarulo/1/edit?html,js,output

I hope this explanation helps!

Answer 2

Once you have obtained the list of users, you can iterate through them and update their status as shown below.

angular.forEach($scope.users, function(a, b){
  var user = a;
  var status = a.status[0]; // <-- since status is an array, we select the first one.
  for (var k in status) {
    if (status.hasOwnProperty(k)) {
      if (status[k]) { // <-- if status is true, retrieve the key.
        user.status = k; // <-- set the user's status object to the key.
      }
    }
  }
});

You have the freedom to change user.status = k to any desired value; setting it to status will overwrite the existing status array.

Check out this working example -> http://jsbin.com/zarulo/1/edit?html,js,output

I hope this explanation helps!

Picking a specific field from an array depending on a filtered value

Answer №1

Similar questions

Angular HttpClient not recognizing hashtag

Combining translate() and scale() transformations in HTML5 Canvas

Try to locate a particular sequence of characters

Establishing the highest allowable value limit in cleave

"Identifying the exact number of keys in a JSON object using

Challenges arise when integrating ng-model with Angular Chosen

I am curious if there is a wysiwyg web editor extension specifically designed for VS2010 available?

Ensure one div scrolls independently while the other remains fixed using Bootstrap

Using the `Array.find()` method in an attempt to dynamically retrieve a specific object value and then return it based on the object name, but unfortunately the function is

Upon installation, the extension that replaces the new tab fails to detect the index.html file

Unleash the power of jQuery to leverage two different input methods

Tips for solving the problem of page navigation using jquery-mobile

Connect-Domain fails to detect errors in the scenario described below:

How to convert a nested array of objects into a string using JavaScript for passing as a URL parameter

Establishing header cache control within the KOA framework

"Using conditional statements to check for specific value ranges and properly handling cases where the result is undefined

What is the best way to handle an array of string inputs in Apollo Server using GQL?

Error: Unexpected character encountered

Issue: Connection timeout encountered while using NPM in a Meteor project

Loop through each row in the Datatable and access the details or child