Ariana Ariana - 2 years ago 79
Javascript Question

Searching through JSON Object with ng-disabled (AngularJS)

One of the features of my web application is the possibility to add new users (username + password) through a form. Thereby, I have one JSON object (

) defined in a controller (
) with all the usernames already chosen by users to avoid the repetition of usernames (it's a unique key).

Sample of my data (fetched-data.json) - format of object "usernames" (


There is a sample of the form to add new users (add-user.html):

<div class="row" ng-controller="UsersController">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Add New User</h3>
<div class="panel-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputUserUsername" class="col-sm-2 control-label"><i class="icon fa fa-user"></i> USERNAME</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputUserUsername" placeholder="Username" ng-model="user_username">
<div class="form-group">
<label for="inputUserPassword" class="col-sm-2 control-label"><i class="icon fa fa-key"></i> PASSWORD</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputUserPassword" placeholder="Password" ng-model="user_password">
<form class="form-inline">
<div class="span7 text-center">
<button type="submit" class="btn btn-success" ng-click="addUser()" ng-disabled="(!user_username || !user_password)">Save</button>

Sample of my controller (userscontroller.js):

var app = angular.module('myApp');

app.controller('UsersController', ['$scope', 'services', function($scope, services) {

$scope.l_usernames =;

.factory('services', ['$http', function($http){
var serviceBase = 'services/'
var object = {};
object.getData = function(){
return $http.get('fetched-data.json');
return object;

I would like to know how it is possible to not allow the insert of new users if the username is already chosen - searching through the JSON object
- with ng-disabled (by disabling the "Save" button). I also want to print a simple message - "Username already chosen" - if such situation occurs. Thank you.

Answer Source

Add a watch on the user_username scope variable. Whenever it changes search through the JSON object, you can use lodash or underscorejs to search through l_usernames to see if the username already exists. If it exists then set a variable in the scope to false. Bind the ng-disabled of the save button to this variable. Use debounce on the user_username for better performance.

Take a look at this fiddle here


function UsersController($scope) {
    $ = 'Superhero';
    $scope.l_username = [{"0":"default","USERNAME":"default"},{"0":"user1","USERNAME":"user1"},{"0":"user2","USERNAME":"user2"},{"0":"user3","USERNAME":"user3"}];
    $scope.allowSave = true;
    $scope.$watch('user_username', function(value) {
      if (_.findWhere($scope.l_username, {"USERNAME": value}) !== undefined)
         $scope.allowSave = false;
         $scope.allowSave = true;


<button type="submit" class="btn btn-success" ng-click="addUser()" ng-disabled="!allowSave">Save</button>    

Whenever the entered username is found in the array, the allowSave variable is changed which disables the 'save' button.

Note: I have used underscore.js to search through the list. You can use you custom method as well.

I have added the warning message and debounced the model for better performance.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download