Angularjs check if passing value exists in array

Question

I'm trying to pass two text field values into and array using AngularJS, but I also want to check if the first value being passed already exists in the array. If it does I do not want it added again, if it doesn't exist then add the values. I can get it to add the values but I'm getting stuck trying to check if the last name value exists already in the array. I had found some examples I tried to follow but I cant seem to get them to work. Thanks for any help!

<div class="panel-body">
    <div ng-controller="TodoCtrl">
        <ul>
            <li li ng-repeat="todo in todos">
            {{todo.text}}, {{todo.name}}
            </li>
        </ul>
        <form class="form-horizontal">
        <input type="text" ng-model="formTodoLast" ng-model-instant>
        <input type="text" ng-model="formTodoFirst" ng-model-instant>
        <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
    </div>
</div>

todo.js

function TodoCtrl($scope) { 
    $scope.todos = [];

    $scope.addTodo = function () {

    if($scope.todos.indexOf(text:$scope.formTodoLast) == -1) {
        $scope.todos.push({text:$scope.formTodoLast, name:$scope.formTodoFirst});
        $scope.formTodoText = ' ';
        $scope.formTodoName = ' ';
        }
    }
}

Answer 1

As Craig said, you need to loop through the array as such

var addToArray=true;
for(var i=0;i<$scope.todos.length;i++){
    if($scope.todos[i].text===$scope.formTodoLast){
        addToArray=false;
    }
}
if(addToArray){
    $scope.todos.push({text:$scope.formTodoLast, name:$scope.formTodoFirst});
}
$scope.formTodoText = ' ';
$scope.formTodoName = ' ';

Answer 2

This "$scope.todos.indexOf(text:$scope.formTodoLast)" won't work. You have to loop through the array and check the formTodoLast property of each object. Or, if using full jQuery, you could use grep().

Here's an example, note the comparison is case sensitive right now. If it's a long list, consider using a Javascript for loop instead of Angular's forEach, you can break out of the for loop and it's likely faster.

function TodoCtrl($scope) { 
    $scope.todos = [];

    $scope.addTodo = function () {

        var missingName = true;
        angular.forEach($scope.todos, function(value, key){
           if(value.formTodoLast == $scope.formTodoLast)
           {
               missingName = false;
           }
         });

        if(missingName) {
            $scope.todos.push({text:$scope.formTodoLast, name:$scope.formTodoFirst});
            $scope.formTodoText = ' ';
            $scope.formTodoName = ' ';
        }
    }
}

Answer 3

Seems there is syntax error in your snippet. If you prefer one line version on if-statement, change your if condition into:

function TodoCtrl($scope) { 
    $scope.todos = [];

    $scope.addTodo = function () {

    if(!$scope.todos.some(function(td){return td.text===$scope.formTodoLast})) {
        $scope.todos.push({text:$scope.formTodoLast, name:$scope.formTodoFirst});
        $scope.formTodoText = ' ';
        $scope.formTodoName = ' ';
        }
    };
}

Array.prototype.some returns true if any of the element meet the requirement

some() executes the callback function once for each element present in the array until it finds one where callback returns a true value. If such an element is found, some() immediately returns true. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/some