Update only one array value from another array in AngularJS

Question

There are two arrays that I'm getting through two different functions and services from MongoDB.

One array (rolesList) is used to fill a select box and the other (userList) to fill a table. The thing is that the collection from where this last array is obtained has only the role id and I need to print the role name to the table, since I already have the data I need a way to get the role name from the rolesList array and update userList.role with it.

What would be the best way to do it?
I leave a code snippet so you can hopefully understand my problem better.

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.userList = [ { _id: 'ae21e1f0663dddf0c6e5e8b',
    fullname: 'Cosme Fulanito',
    lastname: 'Fulanito',
    lastname2: '',
    email: '[email protected]',
    role: 'ADMIN_APPLICANT_PROFILE', //this is the _id on rolesList and I need to print the name
    name: 'Cosme' },
  { _id: 'ae21e4b0663dddf0c6e5e8d',
    fullname: 'Benito Camelo',
    lastname: 'Camelo',
    lastname2: '',
    email: '[email protected]',
    role: 'PURCHASER_PROFILE',
    name: 'Benito' } ]


$scope.rolesList = [ {
_id: "ADMIN_APPLICANT_PROFILE",
name: "Administrador solicitante"
},
{
_id: "PURCHASER_PROFILE",
name: "Comprador" } ]

   
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>

    <div class="request-table-overflow">
      <table class="table m-b-none">
        <thead>
          <tr>
            <th>#</th>
            <th>Usuario</th>
            <th>Tipo de Cuenta</th>
            <th>Nombre</th>
            <th>Apellido</th>
            <th></th>
          </tr>
        </thead>
        <tbody ng-app="myApp" ng-controller="myCtrl">
          <tr ng-repeat="row in userList" st-select-row="row">
            <td class="text-muted"><span class="badge bg-black">{{$index +1}}</span></td>
            <td>{{row.email}}</td>
            <td>{{row.role}}</td> <!--This need to be updated to display the value of rolesList.name-->
            <td>{{row.name}}</td>
            <td>{{row.lastname}}</td>
            <td>
              <h5 ng-click="details(row._id)">
                             <span class="text-muted">Ver detalle </span>
                             <i class="fa fa-chevron-right" aria-hidden="true"></i>
                           </h5>
            </td>
          </tr>
        </tbody>

      </table>
    </div>

BShaps · Accepted Answer · 2018-07-20 23:55:51Z

1

My personal approach for situations like this is to use an object as a dictionary.

To do so you can change your rolesList to look like this:

$scope.rolesList = {
    "ADMIN_APPLICANT_PROFILE": "Administrador solicitante",
    "PURCHASER_PROFILE": "Comprador" 
}

Then in your table row you can reference the role name using the role value

<td>{{ rolesList[row.role] }}</td>

If you can't change the format of rolesList you can create the dictionary with the following loop

$scope.roleListDict = {};
angular.forEach($scope.rolesList, function(role, roleIndex) {
    $scope.roleListDict[role._id] = role.name;
});

And

<td>{{ roleListDict[row.role] }}</td>

edited Jul 20, 2018 at 23:55

answered Jul 20, 2018 at 22:31

BShaps

1,4248 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Salix Over a year ago

"since I already have the data I need a way to get the role name from the rolesList array and update userList.role with it." So I'm assuming they can't change the array.

BShaps Over a year ago

@Salix updated with how you can create the dictionary keeping the same format of the rolesList. Then if you do the roleListDict method you will need to change the <td> tag to roleListDict[row.role]

BShaps Over a year ago

It's not an array, it is an object. Object.name === Object[name], but you need to use Object[name] if name is dynamic. {{ rolesList[row.role] }} will only work if you change the format of rolesList like I did in my answer. Otherwise you need to do the forEach and use {{ roleListDict[row.role] }}

BShaps Over a year ago

I created a working fiddle here using the roleListDict method and it works. jsfiddle

NullEins Over a year ago

Wow! lots of things to consider here. Thanks a lot to both of you for your help.

|

Collectives™ on Stack Overflow

Update only one array value from another array in AngularJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related