How do I ensure an array has no null values?

Question

I would like test my Array (input value) before submit my form.

My array with value :

const fields = [
  this.state.workshopSelected,
  this.state.countrySelected,
  this.state.productionTypeSelected,
  this.state.numEmployeesSelected,
  this.state.startAt
];

I've try this :

_.forEach(fields, (field) => {
  if (field === null) {
    return false;
  }
});

alert('Can submit !');
...

I think my problem is because i don't use Promise. I've try to test with Promise.all(fields).then(());, but i'm always in then.

Anyone have idea ?

Thank you :)

@Bergi: The OP is using [lodash's `_.forEach`](https://lodash.com/docs/4.17.4#forEach), not Array's. It does indeed allow early termination via `return false`. — T.J. Crowder, Jan 09 '18 at 10:36
@T.J.Crowder Still, `_.forEach` doesn't return a value or break from the function (to prevent the alert) like the OP expects, does it? — Bergi, Jan 09 '18 at 10:39
@Bergi: It does break the `_.forEach`. It doesn't return that information, no. — T.J. Crowder, Jan 09 '18 at 10:44

score 2 · Accepted Answer · answered Jan 09 '18 at 10:39

The problem is that even though you're terminating the lodash _.forEach loop early, you don't do anything else with the information that you had a null entry.

Instead of lodash's _.forEach, I'd use the built-in Array#includes (fairly new) or Array#indexOf to find out if any of the entries is null:

if (fields.includes(null)) { // or if (fields.indexOf(null) != -1)
    // At least one was null
} else {
    // All were non-null
    alert('Can submit !');
}

For more complex tests, you can use Array#some which lets you provide a callback for the test.

Live example with indexOf:

const state = {
  workshopSelected: [],
  countrySelected: [],
  productionTypeSelected: [],
  numEmployeesSelected: [],
  startAt: []
};
const fields = [
  state.workshopSelected,
  state.countrySelected,
  state.productionTypeSelected,
  state.numEmployeesSelected,
  state.startAt
];
if (fields.indexOf(null) != -1) {
  console.log("Before: At least one was null");
} else {
  console.log("Before: None were null");
}
fields[2] = null;
if (fields.indexOf(null) != -1) {
  console.log("After: At least one was null");
} else {
  console.log("After: None were null");
}

Thank you @T.J.Crowder, i've edit my code and it work nice, and very good explanation. Thank again ! — s-leg3ndz, Jan 09 '18 at 10:49

Chirag Ravindra · Answer 2 · 2018-01-09T10:47:12.723

You do not need to use promises unless there is an asynchronous operation (for example if you are getting that array from your server).

If you already have that array you can do something like:

// Using lodash/underscore
var isValid = _.every(fields, (field) => (field!==null)}

// OR using the Array.every method

var isValid = fields.every((field)=>(field!==null))

// Or using vanilla JS only
function checkArray(array){
   for(var i = 0; i < array.length ; i ++){
       if(array[i]===null){
           return false;
       }
   }
   return true;
}

var isValid = checkArray(fields);

// After you get that value, you can execute your alert based on it
if(!isValid){
    alert('Something went wrong..');
}

score 0 · Answer 3 · answered Jan 09 '18 at 10:51

0

Try this simple snippet

var isAllowedToSubmit = true;
_.forEach(fields, (field) => {
  if (!field) {
    isAllowedToSubmit = false;
  }
});

if(isAllowedToSubmit)
 alert('Can submit !');

answered Jan 09 '18 at 10:51

Ashraful Islam

1,228
10
13

score 0 · Answer 4 · answered Jan 09 '18 at 11:00

0

You can do that without library:

if (fields.some(field => field === null)) {
    alert('Cannot submit');
} else {
    alert('Can submit');
}

answered Jan 09 '18 at 11:00

Faly

13,291
2
19
37

Adeel Imran · Answer 5 · 2018-01-09T10:56:33.423

-1

You don't need to use lodash, you can do this in simple vanilla javascript. Simply iterate over each field and if an error occurs set your errors bool to true

let errors = false;
fields.forEach(field) => {
  if(field === null || field === '') {
    errors = true;
  }
});

if (!errors) {
  alert('Yay no errors, now you can submit');
}

For an es6 you can use.

 const hasNoError = fields.every((field, index, selfArray) => field !== null);
 if (!hasNoError) {
    alert('yay It works');
 };

Have a look at Array.every documentation Array every MDN documentation

edited Jan 09 '18 at 10:56

answered Jan 09 '18 at 10:37

Adeel Imran

13,166
8
62
77

Downvoter: Not optimal (and Adeel, why did you add `field === ''`?), but I wouldn't have *downvoted* it. It *works*, after all. – T.J. Crowder Jan 09 '18 at 10:41
It works, `field === ''` was added in place if the OP wanted to check any empty values in his/her array. I am not sure why I was down voted. This approach is better then using lodash. – Adeel Imran Jan 09 '18 at 10:53

How do I ensure an array has no null values?

5 Answers5