AngularJS select array hash element by name/value

Question

I have the following angular array for one of my select tags

var names= [{name: 'Superman', val: '1'}, {name: 'Batman', val: '2'}];
$scope.names =names;
$scope.FormData = {};
$scope.FormData.name = $scope.names[1];

In the above array, instead of selecting the item by index (1), how can I select the item by name or the val, like

$scope.FormData.name = $scope.names['2']; #will select the {name: 'Batman', val: '2'}

I initially posted a lengthy question here, but then I realized this is the more simpler / focus way of my question

If you're talking about a select element you should show that too and clarify your question. — Jason Goemaat
– Jason Goemaat, Commented Sep 1, 2014 at 22:40
not clear what issue is. Can access the whole object using ng-options correctly. Need more details about problem — charlietfl
– charlietfl, Commented Sep 1, 2014 at 22:42
What is your issue here? Displaying in the ng-option or selecting the ng-Model data from the array for default selection? — PSL
– PSL, Commented Sep 1, 2014 at 22:44
probably this is an x/y problem which makes it look like a pure javascript question. — PSL
– PSL, Commented Sep 1, 2014 at 22:52

Josep · Accepted Answer · 2014-09-01 23:06:55Z

7

If you are using angular, why not use the build in $filter?

https://docs.angularjs.org/api/ng/filter/filter

In your case, if you want to filter in the controller, the code bellow will retrieve an Array with all the occurrences inside names that match the search for 'Superman':

$filter('filter')($scope.names, {name:'Superman'})

If you are confident that there will be at least one match you could do this in order to get the first match:

var matches = $filter('filter')($scope.names, {name:'Superman'});
var match = matches[0]:

Bare in mind that if there are no matches then match will be undefined

edited Sep 1, 2014 at 23:06

answered Sep 1, 2014 at 22:50

Josep

13.1k2 gold badges44 silver badges45 bronze badges

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

Comments

Leo Farmer · Accepted Answer · 2014-09-01 23:42:09Z

2

If you want a re-useable function you could do it like this:

$scope.find = function(list, attributeName, attributeValue){
    var returnVal = {};
    angular.forEach(list,function(item){
        if(item[attributeName]){
          if(item[attributeName] === attributeValue){
            returnVal = item;
          }
        }
    });
    return returnVal;
};

$scope.FormData.name = $scope.find(names,'name','Batman');

answered Sep 1, 2014 at 23:42

Leo Farmer

7,9606 gold badges35 silver badges48 bronze badges

Comments

Mik378 · Accepted Answer · 2014-09-02 09:02:30Z

2

In the above array, instead of selecting the item by index (1), how can I select the item by name

You can use the find method of the Lodash library (http://lodash.com/docs#find):

var names= [{name: 'Superman', val: '1'}, {name: 'Batman', val: '2'}];

var matchingBatman = _.find(names, { name: 'Batman' });

matchingBatman is: {name: 'Batman', val: '2'}

You can do the same if you want to find by val:

var matchingBatman = _.find(names, { val: '2' });

edited Sep 2, 2014 at 9:02

answered Sep 1, 2014 at 22:40

Mik378

22.2k15 gold badges94 silver badges191 bronze badges

4 Comments

sameera207 Over a year ago

thanks for answer, I liked the idea of $filter as it seems more angular, but this will be a library I will surly look in to

Mik378 Over a year ago

@sameera207 Yes, the solution with $filter is equivalent, so make use of it. Lodash is useful for many complex manipulations of arrays/collections, I'm using it a lot :)

sameera207 Over a year ago

I'm pretty new to angular and I think its just mater of days/hours I need to start using Lodash :)

Mik378 Over a year ago

Everytime you'll need to manipulate arrays/collections, look at what Angular has, and if it hasn't a pretty way to do what you exactly want, Lodash is likely to be the key.

Sri · Accepted Answer · 2014-09-01 22:55:28Z

0

If you want to write a function instead of using a library

function selectByProperty(key, val){

    for(var i=0; i< $scope.names.length; i++){
        if($scope.names[i][key] === val){
           return $scope.names[i];
         }
     }

}
$scope.FormData.name  = selectByProperty('val','2');

answered Sep 1, 2014 at 22:55

Sri

5764 silver badges15 bronze badges

2 Comments

PSL Over a year ago

Why would you want to iterate once you have found a match

sameera207 Over a year ago

thanks for answer, I liked the idea of $filter as it seems more angular

Collectives™ on Stack Overflow

AngularJS select array hash element by name/value

4 Answers 4

Comments

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related