find value in array without looping (angular) - arrays

Question

i have created angular directive which replace string value
applabel directive:
app.directive('applabel',function(){
return{
templateurl:'label.html',
restrict: 'E',
replace: true,
scope:{
'key' : '#',
'default' : '#'
},
link : function(scope,elem,attr){
var data = [{key: Id , value:"ID"},
{ key: name, value: "Name"},
{ key: sts, value: "status"} ];
var keyVal = scope.key;
for(var i = 0;i < data.length ; i++)
{
if(keyVal = data.length[i].key)
{
scope.value = data.length[i].value;
}
else {
scope.value = scope.default;
}
}
}
}
});
my html code is
<applabel key="name" default="Default Name">
</applabel>
label.html
<label>{{value}}</label>
output will be: Name
this code works properly
but the problem i don't want for loop in my code because in data array there is too much data and i am using multiple times this 'applabel' directive in my page so that it takes to much time
any solution that without looping my value is replaced
thanks in advance

Answer 1

If you have data as array the only way to find some data is iterate over, if you want to not iterate you could keep data as hash map( JS Object)

Answer 2

I find underscorejs to be a very useful library to include in my projects. With it you can use one of a few functions to get what you are looking for. One would be _.find
var result = _.find(data, function(x){ return x.key === scope.key; });
scope.value = result.value;

Answer 3

If you can modify the data, you can use an object instead of an array. This way accessing a value is done in constant time
app.directive('applabel',function(){
return{
templateurl:'label.html',
restrict: 'E',
replace: true,
scope:{
'key' : '#',
'default' : '#'
},
link : function(scope,elem,attr){
var data = {Id:{value:"ID"},
name: {value: "Name"},
sts:{ value: "status"} };
var keyVal = scope.key;
scope.value=typeof data[keyVal] !=="undefined" ? data[keyVal].value : scope.default;
}
}
}
});
If you don't need to add more informations to the object you can do
var data = {Id:"ID", name:"Name", sts:"status"};
var keyVal = scope.key;
scope.value=typeof data[keyVal] !=="undefined" ? data[keyVal] : scope.default

Answer 4

This code has several errors, but I guess this is irrelevant.
Instead of using an array of objects each having a key and value fields, use a single object:
{
Id: 'ID',
name: 'Name',
sts: 'status
}
and then simply use
scope.value = data[scope.key] || scope.default;
Another thing that you should do is define the data out of the link function: there is no way to recreate a whole new array/object every time the directive is used.