When the page is loading for the first time, I need to check if there is an image in image_array and load the last image.
Otherwise, I disable the preview buttons, alert the user to push new image button and create an empty array to put the images;
The problem is that image_array in the else fires all time. If an array exists - it just overrides it, but alert doesn't work.
if(image_array.length > 0)
$('#images').append('<img src="'+image_array[image_array.length-1]+'" class="images" id="1" />');
else{
$('#prev_image').attr('disabled', 'true');
$('#next_image').attr('disabled', 'true');
alert('Please get new image');
var image_array = [];
}
UPDATE
Before loading html, I have something like this:
<?php if(count($images) != 0): ?>
<script type="text/javascript">
<?php echo "image_array = ".json_encode($images);?>
</script>
<?php endif; ?>
if (typeof image_array !== 'undefined' && image_array.length > 0) {
// the array is defined and has at least one element
}
Your problem may be happening due to a mix of implicit global variables and variable hoisting. Make sure you use var whenever declaring a variable:
<?php echo "var image_array = ".json_encode($images);?>
// add var ^^^ here
And then make sure you never accidently redeclare that variable later:
else {
...
image_array = []; // no var here
}
To check if an array is either empty or not
A modern way, ES5+:
if (Array.isArray(array) && array.length) {
// array exists and is not empty
}
An old-school way:
typeof array != "undefined"
&& array != null
&& array.length != null
&& array.length > 0
A compact way:
if (typeof array != "undefined" && array != null && array.length != null && array.length > 0) {
// array exists and is not empty
}
A CoffeeScript way:
if array?.length > 0
Why?
Case Undefined
Undefined variable is a variable that you haven't assigned anything to it yet.
let array = new Array(); // "array" !== "array"
typeof array == "undefined"; // => true
Case Null
Generally speaking, null is state of lacking a value. For example a variable is null when you missed or failed to retrieve some data.
array = searchData(); // can't find anything
array == null; // => true
Case Not an Array
Javascript has a dynamic type system. This means we can't guarantee what type of object a variable holds. There is a chance that we're not talking to an instance of Array.
supposedToBeArray = new SomeObject();
typeof supposedToBeArray.length; // => "undefined"
array = new Array();
typeof array.length; // => "number"
Case Empty Array
Now since we tested all other possibilities, we're talking to an instance of Array. In order to make sure it's not empty, we ask about number of elements it's holding, and making sure it has more than zero elements.
firstArray = [];
firstArray.length > 0; // => false
secondArray = [1,2,3];
secondArray.length > 0; // => true
How about (ECMA 5.1):
if(Array.isArray(image_array) && image_array.length){
// array exists and is not empty
}
This is what I use. The first condition covers truthy, which has both null and undefined. Second condition checks for an empty array.
if(arrayName && arrayName.length > 0){
//do something.
}
or thanks to tsemer's comment I added a second version
if(arrayName && arrayName.length)
Then I made a test for the second condition, using Scratchpad in Firefox:
var array1;
var array2 = [];
var array3 = ["one", "two", "three"];
var array4 = null;
console.log(array1);
console.log(array2);
console.log(array3);
console.log(array4);
if (array1 && array1.length) {
console.log("array1! has a value!");
}
if (array2 && array2.length) {
console.log("array2! has a value!");
}
if (array3 && array3.length) {
console.log("array3! has a value!");
}
if (array4 && array4.length) {
console.log("array4! has a value!");
}
which also proves that if(array2 && array2.length) and if(array2 && array2.length > 0) are exactly doing the same
optional chaining
As optional chaining proposal reached stage 4 and is getting wider support, there is a very elegant way to do this
if(image_array?.length){
// image_array is defined and has at least one element
}
You should use:
if (image_array !== undefined && image_array.length > 0)
If you want to test whether the image array variable had been defined you can do it like this
if(typeof image_array === 'undefined') {
// it is not defined yet
} else if (image_array.length > 0) {
// you have a greater than zero length array
}
JavaScript
( typeof(myArray) !== 'undefined' && Array.isArray(myArray) && myArray.length > 0 )
Lodash & Underscore
( _.isArray(myArray) && myArray.length > 0 )
You can use jQuery's isEmptyObject() to check whether the array contains elements or not.
var testArray=[1,2,3,4,5];
var testArray1=[];
console.log(jQuery.isEmptyObject(testArray)); //false
console.log(jQuery.isEmptyObject(testArray1)); //true
Source: https://api.jquery.com/jQuery.isEmptyObject/
Using undescore or lodash:
_.isArray(image_array) && !_.isEmpty(image_array)
A simple way that doesn't result in exceptions if not exist and convert to boolean:
!!array
Example:
if (!!arr) {
// array exists
}
How about this ? checking for length of undefined array may throw exception.
if(image_array){
//array exists
if(image_array.length){
//array has length greater than zero
}
}
The best is to check like:
let someArray: string[] = [];
let hasAny1: boolean = !!someArray && !!someArray.length;
let hasAny2: boolean = !!someArray && someArray.length > 0; //or like this
console.log("And now on empty......", hasAny1, hasAny2);
See full samples list:
I come across this issue quite a lot in Javascript. For me the best way to do it is to put a very broad check before checking for length. I saw some other solutions in this Q&A, but I wanted to be able to check for either null or undefined or any other false value.
if(!array || array.length == 0){
console.log("Array is either empty or does not exist")
}
This will first check for undefined, null, or other false values. If any of those are true, it will complete the boolean as this is an OR. Then the more risky check of array.length, which could error us if array is undefined, can be checked. This will never be reached if array is undefined or null, so the ordering of conditions is very important.
If you do not have a variable declared as array you can create a check:
if(x && x.constructor==Array && x.length){
console.log("is array and filed");
}else{
var x= [];
console.log('x = empty array');
}
This checks if variable x exists and if it is, checks if it is a filled array. else it creates an empty array (or you can do other stuff);
If you are certain there is an array variable created there is a simple check:
var x = [];
if(!x.length){
console.log('empty');
} else {
console.log('full');
}
You can check my fiddle here with shows most possible ways to check array.
The following is my solution wrapped in a function that also throws
errors to manage a couple of problems with object scope and all types
of possible data types passed to the function.
Here's my fiddle used to examine this problem (source)
var jill = [0];
var jack;
//"Uncaught ReferenceError: jack is not defined"
//if (typeof jack === 'undefined' || jack === null) {
//if (jack) {
//if (jack in window) {
//if (window.hasOwnP=roperty('jack')){
//if (jack in window){
function isemptyArray (arraynamed){
//cam also check argument length
if (arguments.length === 0) {
throw "No argument supplied";
}
//console.log(arguments.length, "number of arguments found");
if (typeof arraynamed !== "undefined" && arraynamed !== null) {
//console.log("found arraynamed has a value");
if ((arraynamed instanceof Array) === true){
//console.log("I'm an array");
if (arraynamed.length === 0) {
//console.log ("I'm empty");
return true;
} else {
return false;
}//end length check
} else {
//bad type
throw "Argument is not an array";
} //end type check
} else {
//bad argument
throw "Argument is invalid, check initialization";;
}//end argument check
}
try {
console.log(isemptyArray(jill));
} catch (e) {
console.log ("error caught:",e);
}
the way I found to work (comming from another language) is to make a simple function to test.
create a function that check the size of the array and pass the lenght by parameter.
isEmpty(size){
if(size==0) {
return true;
} else {
return false;
}
}
//then check
if(isEmpty(yourArray.length)==true){
//its empty
} else {
//not empty
}
You should do this
if (!image_array) {
// image_array defined but not assigned automatically coerces to false
} else if (!(0 in image_array)) {
// empty array
// doSomething
}
For me sure some of the high rated answers "work" when I put them into jsfiddle, but when I have a dynamically generated amount of array list a lot of this code in the answers just doesn't work for ME.
This is what IS working for me.
var from = [];
if(typeof from[0] !== undefined) {
//...
}
Notice, NO quotes around undefined and I'm not bothering with the length.
Probably your image_array is not array but some OBJECT with length property (like string) - try
if(image_array instanceof Array && image_array.length)
function test(image_array) {
if(image_array instanceof Array && image_array.length) {
console.log(image_array,'- it is not empty array!')
} else {
console.log(image_array,'- it is empty array or not array at all!')
}
}
test({length:5});
test('undefined');
test([]);
test(["abc"]);
In my case, array_.length always returned 0, even if it had values inside. Probably, because of non-default indexes.
So to check if array is defined we use typeof _array !== 'undefined'
And then to check if it contains any date i just simply compare it to an empty array _array !== []
in ts
isArray(obj: any)
{
return Array.isArray(obj)
}
in html
(photos == undefined || !(isArray(photos) && photos.length > 0) )
When you create your image_array, it's empty, therefore your image_array.length is 0
As stated in the comment below, i edit my answer based on this question's answer) :
var image_array = []
inside the else brackets doesn't change anything to the image_array defined before in the code
Related
I'm trying to check if the object properties 'compliancestatus' and 'comments' are empty, undefined, undeclared i.e. no real value.
I am first checking that the item exists in the object array and my console.log shows that the values do exist and that both object properties are undefined.
The issue is that the second object triggers the else (obj array after2) somehow...
My object is created using:
// Create the object.
let contentObj = new Object();
contentObj.prefix = clausePrefix;
contentObj.no = clauseNo;
if (clauseComplianceStatus != null) {
contentObj.compliancestatus = clauseComplianceStatus;
}
if (clauseComments != null) {
contentObj.comments = clauseComments;
}
code
// Check if current iteration exists in the content array.
if (content.some(e => e.prefix === tempOBJ.content[y].prefix && e.no === tempOBJ.content[y].no)) {
// THIS WORKS FOR ALL OBJECTS
let currentIterationIndexOfClauseNo = content.findIndex(e => e.prefix === tempOBJ.content[y].prefix && e.no === tempOBJ.content[y].no);
if (!content[currentIterationIndexOfClauseNo].compliancestatus && !content[currentIterationIndexOfClauseNo].comments) {
// THIS WILL ONLY WORK FOR THE FIRST OBJECT
} else {
// SECOND OBJECT EXECUTES HERE FOR SOME REASONS DESPITE HAVING BOTH VALUES 'undefined' THE SAME AS THE FIRST OBJECT.
}
}
I can't comment, so I'll have to ask this way. Have you checked if your currentIterationIndexOfClauseNo actually changes? The code is still a little bit hard to understand, but I have one small suggestion to make (no solution but makes the code a bit simpler). Are the values of the first object also both undefined?
const obj = content.find(e => e.prefix === tempOBJ.content[y].prefix && e.no === tempOBJ.content[y].no); // will be undefined if nothing was found
if (obj !== undefined) {
if (!obj.compliancestatus && !obj.comments) {
// THIS WILL ONLY WORK FOR THE FIRST OBJECT
} else {
// SECOND OBJECT EXECUTES HERE FOR SOME REASONS DESPITE HAVING BOTH VALUES 'undefined' THE SAME AS THE FIRST OBJECT.
}
}
Given two arrays myArray1 and myArray2, which may be null, how can I output a Boolean which tells me if at least one array is non-empty?
Assuming that I have the following variables:
myArray1 = ["one", "two", "three"]; //-> non-empty array
myArray2 = null; //-> not an array (in my case this happens from .match() returning no results)
I want an expression, such that myArray1 && myArray2 will be FALSE, but myArray1 || myArray2 will be TRUE.
I did look through other relevant Stack Overflow questions (see an abridged list below), but since I still struggled to figure out the solution, I thought I would post it as a separate question since answers might also benefit others.
The common way of testing for empty arrays is:
myBooleanOr = (myArray1.length || myArray2.length); //3
myBooleanAnd = (myArray1.length && myArray2.length); //Error
This works if both variables are arrays, but in this case, the second one will throw up Error: cannot read property length of 'null'. Using the Boolean() function does not solve the problem since the following also throws up the same error:
myBooleanAnd = (Boolean(myArray1.length) && Boolean(myArray2.length)); //error
A solution for testing empty arrays which was accepted in several Stack Overflow questions is to use typeof myArray !== "undefined", but that still does not solve the problem, because neither of the arrays match "undefined", so myBooleanAnd will still throw up an error:
var bool = (typeof myArray1 !== "undefined"); //true
var bool = (typeof myArray2 !== "undefined"); //true
var myBooleanAnd = ((typeof myArray1 !== "undefined" && myArray1.length) || (typeof myArray2 !== "undefined" && myArray2.length)); //Error: cannot read property length of null
Comparing the arrays against [], which also seems intuitive, also doesn't work, because neither of the arrays match []:
var bool = (myArray1 !== []); //true
var bool = (myArray2 !== []); //true
Other relevant posts
A number of other questions on Stack Overflow deal with testing for empty Javascript arrays, including:
Testing for empty arrays: Check if array is empty or exists
Testing for empty arrays (jQuery): Check if array is empty or null
Relative advantages of methods for testing empty arrays: Testing for an empty array
Testing for empty objects: How do I test for an empty JavaScript object?
And there are also questions about the truth value of empty arrays in Javascript:
JavaScript: empty array, [ ] evaluates to true in conditional structures. Why is this?
UPDATE
I have corrected the following errors posted in the original question (thanks to those who pointed them out). I am listing them here since they might also be helpful to others:
==! changed to !==
typeof x === undefined, changed to typeof x === "undefined"
I would suggest using a helper function to determine if a single array is non-empty, and then use that twice. This is simple and straightforward:
function isNonEmptyArray(arr) {
return !!(Array.isArray(arr) && arr.length);
}
var myBooleanAnd = isNonEmptyArray(myArray1) && isNonEmptyArray(myArray2);
var myBooleanOr = isNonEmptyArray(myArray1) || isNonEmptyArray(myArray2);
Ok, so, there're a bunch of errors in the code examples, i'll try to to explain them all:
myBooleanOr = (myArray1.length || myArray2.length); //3
myBooleanAnd = (myArray1.length && myArray2.length); //Error
Here, the first line returns the first truthy value it encounters. Since myArray1 has a length > 0, it returns that value and never evaluates the second part of the condition, that's why you're not getting the error. Swap the checks and it will break.
The second line combines the two values to give a result, so it will always give an error when one of the two variables are null.
var bool = (typeof myArray1 === undefined); //false
typeof returns a string, if you compare it to the undefined constant it will always be false, the correct statement is typeof myArray1 === "undefined" as written in most of the posts you linked
var bool = (myArray2 ==! null);
the "strictly not equal" operator is !== and NOT ==!. You're doing a different operation and that's why you get surprising results.
Putting the right spaces in the syntax, this is your code var bool = (myArray2 == !null);
So you boolean-flip the value of null, which is falsy by nature, getting true, and then compare if myArray2 is loosely-equal to true ... since myArray2 is null, and that is falsy as we said, the comparison gives back a false.
That said, for the solution to the question, I'd propose a slightly longer syntax that is more explicit, clear to understand, and you can scale to check how many arrays you like without adding more complexity:
var myArray1 = [1,2,3]
var myArray2 = null
var arrays = [myArray1, myArray2]
var oneNotEmpty = arrays.some( a => typeof a != "undefined" && a != null && a.length > 0)
console.log("At least one array non-empty?", oneNotEmpty)
You could use isArray to check something is an array or not. Most modern browsers supports it. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
And then you can combine isArray and array's length to check if something is a valid non empty array or not.
function isOneNotEmpty(arrayOne, arrayTwo){
return (Array.isArray(arrayOne)? arrayOne.length > 0 : false) || (Array.isArray(arrayTwo)? arrayOne.length > 0 : false)
}
console.log(isOneNotEmpty([],null));
console.log(isOneNotEmpty([1,2,3,4],null));
console.log(isOneNotEmpty([3,4,5],[1]));
Testing for an array is simple enough:
var blnIsPopulatedArray = (myArray != null
&& typeof myArray == "object"
&& typeof myArray.length == "number"
&& myArray.length > 0);
Will return false if 'myArray' isn't an array with at least one item, or true if it is an array with at least one item.
One solution is the following (with or without Boolean()):
Using Array.isArray() and array.length:
var myBooleanAnd = Boolean(Array.isArray(myArray2) && myArray2.length) && Boolean(Array.isArray(myArray1) && myArray1.length) ; //false -> OK
var myBooleanOr = Boolean(Array.isArray(myArray2) && myArray2.length) || Boolean(Array.isArray(myArray1) && myArray1.length) ; //true -> OK
It is also possible to use myArray1 !== null instead of Array.isArray(myArray1), but since the latter is a more specific test, the broader Array.isArray() method seems preferable.
UPDATE
I had previously suggested using the following:
var myBooleanAnd = Boolean(myArray1 && myArray2); //returns false -> OK
var myBooleanOr = Boolean(myArray1 || myArray2); //returns true -> OK
but since, as pointed out by #JLRishe, the following expression also returns TRUE, this is not a safe solution, since it will only work in situations where the arrays can never be empty.
var bool = Boolean([] && []); //returns true -> false positive
function arrayIsEmpty(array) {
if (!Array.isArray(array)) {
return false;
}
if (array.length == 0) {
return true;
}
}
If we have:
var obj = {
key: [1000, 10, 50, 10]
};
-If the array at the given key is empty, it should return 0.
-If the property at the given key is not an array, it should return 0.
-If there is no property at the given key, it should return 0.
I'm trying to get the average of the elements at the property (key) with a function, getAverageOfElementsAtProperty(obj, 'key').. I managed that part with exception of the 3 points above.
I tried this:
if (obj[key].constructor != Array || !obj.hasOwnProperty(key) ||
obj[key] == []) {
return 0;
}
But I'm unsure if using three or operational is the correct move...
You can check multiple conditions like this
if (
typeof obj === 'object' && // you have an object
'key' in object && // it contains a "key"
Array.isArray( obj['key'] ) // it is an array
)
So for each condition you mentioned it can be done as follows
If the array at the given key is empty, it should return 0.
obj.key.length === 0
If the property at the given key is not an array, it should return 0.
!Array.isArray(obj[key])
If there is no property at the given key, it should return 0.
!obj.hasOwnProperty("key").
You can directly check for a falsy value to check the existence. Also, check if the the value is an array by using the Array.isArray function and then for checking the length of array, use the length property.
if(!obj.hasOwnProperty("key") || !Array.isArray(obj[key]) || obj.key.length === 0)){
return 0;
}
I like to break up my if into the business logic that it needs to fulfill. I find it easier to understand when I get back to it later on. So I would do it this way
if (!obj.hasOwnProperty(key)) return 0; // If there is no property at the given key
if (!Array.isArray(obj[key])) return 0; // If the property at the given key is not an array
if (obj[key].length === 0) return 0; // If the array at the given key is empty
// add this point we know there is a valid array
You can check, first, [1] if the key exists, then [2] if it's array, and, then, [3] if it's not empty.
Order matters: due to Short-circuit evaluation, if it evaluates true in the first condition, it skips nexts checks (then, you can safely assume that the key exists, that it's an array and so on...)
var obj = {
key: [1000, 10, 50, 10],
key2: [],
key3: "abc"
};
function isValid(obj, key) {
if (
(typeof obj[key] === 'undefined') || //If there is no property at the given key (first)
(!Array.isArray(obj[key])) || //If the property at the given key is not an array (IE9>=)
(obj[key].length == 0) //If the array at the given key is empty,
) {
return 0;
} else {
return 1; /* or whathever you want */
}
}
console.log(isValid(obj, "key")); //1
console.log(isValid(obj, "key2")); //0
console.log(isValid(obj, "key3")); //0
console.log(isValid(obj, "key4")); //0
Note that (typeof obj[key] === 'undefined') is not necessary here, because Array.isArray(undefined) === false (check docs), so, you can skip this check.
if (obj[key].constructor != Array || ... will throw an error if obj[key] is undefined because, then, you'll be accessing constructor of undefined which will throw an error. What you need to do is check if a the value obj[key] exist then if it is an array like this:
if(obj[key] !== undefined || obj[key].constructor != Array)
return 0;
In general: The or (||) operator will stop checking (evaluating) after the first valid check. Consider check0 || check1 || ... || checkN, if checki is true then checki+1 ... checkN won't be evaluated at all. Because only one valid check is sufficient. Here is an example:
var n = 5;
if(n == 5 || console.log("Here 1"))
;
n = 4;
if(n == 5 || console.log("Here 2"))
;
As you can see, Here 1 is never loged because the code console.log("Here 1") is never reached.
Hopefully an easy question.
Why is that checking for existence of a key in a multidimensional array:
a = new Array(Array());
a[0][0]='1';
a[0][1]='2';
if(a[1][2] == undefined){
alert("sorry, that key doesn't exist");
} else {alert('good, your key exists');
}
seems not to be working in general, but it works when I check for a first index (in this case, '0') that is 'defined' by a[0][x]. For example, when I ask for a[0][2] (which is not defined), it shows the first alert. However, when I ask for a[1][0], I get:
"Uncaught TypeError: Cannot read property '0' of undefined"
How can I solve this problem?
Thanks
Check first if the first dimension exists then if the key in the second dimension exists
The logic will return false if the first test returns false, and tests the second dimension only if the first one is true.
if(a[1] == undefined && a[1][2] == undefined)
With the first three assignments your array actually looks like this:
a = [['1','2']]
Reading a[0][2] just returns undefined because a[0] exists but its property '0' is not defined.
But trying to read a[1][0] throws a TypeError because a[1] is already undefined and isn’t an object and thus doesn’t have any properties. This is also what your error message says:
Cannot read property '0' of undefined.
You can solve this problem by first checking for a[1] and then checking for a[1][0] using the typeof operator:
if (typeof a[1] !== 'undefined' && typeof a[1][0] !== 'undefined')
On supported platforms, We can just do:
if(a[3]?.[3]){
// Do something
}
a = Array(Array())
does not define a multi-dimensional array. It just defines an array with one item, which happens to be another (empty) array. There are no built-in multidimensional arrays in javascript, so you will have to handle things more manually.
You just need to further qualify the conditional. Since the [1] index of the array is undefined you can't test for values in it.
if(a[1] === undefined || a[1][2] === undefined)
Assuming explicitly arr[i][j] = undefined is not done
Try the below:
(Used last 2nd one today)
if (arr[i]?.[j] === 100) {
// value at i & j is 100
}
if (arr[i]?.[j] !== undefined) {
// value at i & j exists
}
if (arr[i]?.[j] === undefined) {
// value at i & j does not exist
}
if ([100, 200].includes(arr[i]?.[j])) {
// value at i & j is 100 or 200
}
if ([undefined, 100].includes(arr[i]?.[j])) {
// value at i & j does not exist
// Or, value exists & it is 100
}
if ([undefined, 100, 200].includes(arr[i]?.[j])) {
// value at i & j does not exist
// Or, value exists & it is 100 or 200
}
var a = Array(Array());
a[0][0]='1';
a[0][1]='2';
if(a[1] === undefined || a[1][2] === undefined) {
alert("sorry, that key doesn't exist");
} else {
alert('good, your key exists');
}
I'm working with JQuery to determine if an array, built earlier, with a determined number of indexes, is full or not.
When created, array looks like this :
,,,,,,
All I want to do is find if every position is filled or not.
So bascially, i'm trying to test if and only if
[x,x,x,x,x,x]
For example, if
[x,x,x,,x,x] or if [x,,,,,] //return false, wrong...
Thanks a lot.
You don't need any specific jQuery stuff to read the size of an array. Just vanilla javascript has what you need.
var arrayMaxValues = 4;
var testArray = [1,2,3,4];
if ( testArray.length == arrayMaxValues )
{
alert( 'Array is full!' );
}
else if ( testArray.length > arrayMaxValues )
{
alert( 'Array is overstuffed!' );
} else {
alert( 'There's plenty of room!' );
}
EDIT
Ah, you re-typed your question. So, you want to see if they array has zero null or undefined values?
function isArrayFull( arr )
{
for ( var i = 0, l = arr.length; i < l; i++ )
{
if ( 'undefined' == typeof arr[i] || null === arr[i] )
{
return false
}
}
return true;
}
If you fill your initial array with nulls, like:
const arr = Array(9).fill(null);
Then you can use some() or every() like this:
// check if a null doesn't exist
!arr.some(element => element === null)
// check if every element is not null
arr.every(element => element !== null)
Use whichever you like, since both of them breaks the loop when a null is found.
I know this is doing the same as Peter Bailey's function, but I only wanted to share it since it's a different approach using the built-in power of array filtering.
So, since the full array has a predetermined length you could filter it against 'undefined' and null and compare lengths, like this:
function isArrayFull(arr) {
return arr.length === arr.filter(function(o) {
return typeof o !== 'undefined' || o !== null;
}).length;
}