CODEWITHSUNDEEP
javascriptarraysangularjs
Hey24sheep
Hey24sheep

Reputation: 1202

Why doing someVar in someArray in an If always give false value

I was just working on something in AngularJS. I noticed that by using the attached style of if condition, I always get a false result. Why so? Am I missing something? I tried to google it but didn't find anything.

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    var allowedExtensions = [".jpg",".pdf", ".png"];
    var testExt = ".jpg";

    if(testExt in allowedExtensions){
       $scope.isAllowed = true;
    }else{
       //will always go here why?
       $scope.isAllowed = false;
    }
}
<html>
<head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
  Is Extension Allowed : {{isAllowed}}
</div>
</body>
</html>

I am from .NET background so we use LINQ in that kinda same like that. Is this type of syntax not supported in JS?

EDIT I know about index of and other ways to find if it is in the array. But I was confused why in operator is not working.

Thank you for your time and help.

Upvotes: 1

Views: 81

Answers (4)

Graham Russell
Graham Russell

Reputation: 1047

It's an array, therefore in only works on indices or property name; from the docs:

The in operator returns true` if the specified property is in the specified object or its prototype chain.

Try allowedExtensions.includes(testExt) or perhaps allowedExtensions.indexOf(testExt) != -1 instead.

See https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/in

Upvotes: 2

Scott Sword
Scott Sword

Reputation: 4718

As pointy called out, your syntax is simply incorrect. There are two main ways you can do this in JS.

Array.indexOf docs

var allowedExtensions = [".jpg",".pdf", ".png"];
var testExt = ".jpg";

if (allowedExtensions.indexOf(testExt) > 0){
  $scope.isAllowed = true;
} else {
  $scope.isAllowed = false;
}

Array.includes docs

var allowedExtensions = [".jpg",".pdf", ".png"];
var testExt = ".jpg";

if (allowedExtensions.includes(testExt)){
  $scope.isAllowed = true;
} else {
  $scope.isAllowed = false;
}

You'll get better browser support with indexOf, but includes is a newer/cleaner solution.

Side-note, I always find in interesting in programming when someone says "if a is true then b is true, if a is false b is false". Rather than have redundant conditional blocks you could just directly assign the expression, since both expressions (indexOf & includes) return the type Boolean. e.g.

$scope.isAllowed = allowedExtensions.includes(testExt);

Upvotes: 1

CoursesWeb
CoursesWeb

Reputation: 4237

The in operator i used to check for properties /keys. In your case you can use Array.indexOf():

if(allowedExtensions.indexOf(testExt)) $scope.isAllowed = true;

Upvotes: 0

Luca Kiebel
Luca Kiebel

Reputation: 10096

You should use Array.prototype.indexOf() for arrays, in is for objects

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    var allowedExtensions = [".jpg",".pdf", ".png"];
    var testExt = ".jpg";

    if(allowedExtensions.indexOf(testExt) !== -1){
       $scope.isAllowed = true;
    }else{
       //will always go here why?
       $scope.isAllowed = false;
    }
}
<html>
<head></head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
  Is Extension Allowed : {{isAllowed}}
</div>
</body>
</html>

Upvotes: 1

Related Questions