Home Why doing someVar in someArray in an If always give false value
Reply: 4

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

Hey24sheep
1#
Hey24sheep Published in 2017-12-07 16:48:55Z

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.

Graham Russell
2#
Graham Russell Reply to 2017-12-07 17:05:39Z

Because it's an array, and in only works on indices or other properties, from the docs:

Object to check if it (or its prototype chain) contains the property with specified name

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

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

Luca
3#
Luca Reply to 2017-12-07 16:54:16Z

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>

Swordfish0321
4#
Swordfish0321 Reply to 2017-12-07 17:04:28Z

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);
CoursesWeb
5#
CoursesWeb Reply to 2017-12-07 17:02:33Z

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;
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.318791 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO