Get unique item from scope array

Question

I have an array with JSON objects in my $scope.users which is working correctly. I'm now trying to set up a "detail" page for an individual user by filtering the users list to get a single user.

I've been close for an excruciating amount of time, and for some reason I can't find documentation or any examples of how to do what I'm doing. Maybe this isn't the correct way to do this in Angular and/or maybe I'm not searching for the right thing?

I've tried getting the object based on userId from the list in the controller, and I've tried passing a resolve in the state, but I didn't get either method to work. What is the best way to go about getting the single user with id of $stateparams.userId?

Everything else is working correctly (i.e. all the routing, getting the users on #/users).

// routing section of app.js
// Routing
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('home', {
      url: '/',
      templateUrl: 'static/partials/main/home.html'
    })
    .state('users', {
      url: '/users',
      templateUrl: 'static/partials/accounts/users.html',
      controller: 'UserController'
    })
    .state('profile', {
      url: '/users/{userId}',
      templateUrl: 'static/partials/accounts/profile.html',
      controller: 'UserController'
    });


// controller.js
var rlGlobalControllers = angular.module('rlGlobalApp.controllers', []);

rlGlobalControllers.controller('UserController', function($scope, $stateParams, $filter) {
  var userId = $stateParams.userId;

  $scope.users = [
    {
      'id': 1,
      'name': 'Shadrack'
    },
    {
      'id': 2,
      'name': 'JP'
    },
    {
      'id': 3,
      'name': 'Adam'
    }
  ];

  // $scope.user = ??? 
});

# profile.html
<div ng-include src="'/static/partials/shared/header.html'"></div>

<div class="container">
  <div class="row">
    <p>users data: {{ users }}</p>
    <p>user data: {{ user }}</p>
  </div>
</div>

stateParams provides {userId} so you can use them.

Farkhat Mikhalko
– Farkhat Mikhalko

2015-02-26 13:18:03 +00:00
Commented Feb 26, 2015 at 13:18 — Farkhat Mikhalko
– Farkhat Mikhalko, Commented Feb 26, 2015 at 13:18
you can use Angular filter

Grundy
– Grundy

2015-02-26 13:21:51 +00:00
Commented Feb 26, 2015 at 13:21 — Grundy
– Grundy, Commented Feb 26, 2015 at 13:21

dfsq · Accepted Answer · 2015-02-26 13:20:52Z

1

User Array.prototype.filter method to find objects satisfying criteria:

$scope.user = $scope.users.filter(function(user) {
    return user.id === userId;
})[0];

This is the most natural way to solve it. If however your users array is very large (like millions, for example (hope it's not)) then for-loop-break solution of juunas is preffered as more effective.

answered Feb 26, 2015 at 13:20

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

4 Comments

awwester Over a year ago

This is my fravorite answer, and I've tried solutions like this. With this code, I'm not able to see the user scope in the template, however I'm able to see the users scope object. I've updated my question to show the template - any idea why the user scope object is not being seen in the template?

awwester Over a year ago

Also, I've added console.log(user.id + ' = ' + userId); before the return to verify the values are there, and they are. There's one pair that matches, but I'm not seeing anything in my $scope.user

awwester Over a year ago

It worked with the equality operator instead of identity. I changed to return user.id == userId; and it worked.

dfsq Over a year ago

Oh, I see, I guess then that userId is a string and id properties in objects are numbers.

juunas · Accepted Answer · 2015-02-26 13:22:07Z

1

You could just do this in the controller:

for(var i = 0; i < $scope.users.length; i++){
  if($scope.users[i].id === userId){
    $scope.user = $scope.users[i];
    break;
  }
}

answered Feb 26, 2015 at 13:22

juunas

59.6k13 gold badges130 silver badges171 bronze badges

Comments

Gunjan Kumar · Accepted Answer · 2019-07-11 04:49:47Z

0

var output = [],
            keys = [];
          Array_Value.forEach(function (item) {
            var key = item["Field name"];
            if (keys.indexOf(key) === -1) {
              keys.push(key);
              output.push(item);
            }
          });
          this.Title = output;

Instead of Array_value and field name, give your data.

answered Jul 11, 2019 at 4:49

Gunjan Kumar

1251 silver badge5 bronze badges

Collectives™ on Stack Overflow

Get unique item from scope array

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related