Supprimer les cases vides d'un tableau en javascript

En Javascript, il n'existe pas de fonction native qui permet de supprimer les éléments vides d'un tableau, comme le fait la fonction array_filter en PHP.

Par contre il existe une fonction Array.filter qui sert à filtrer les éléments d'un tableau en ne conservant que les éléments qui satisfont une condition, définie par une fonction callback. Le petit problème c'est que cette fonction n'est pas implémentée par les vieux navigateurs, c'est-à-dire IE8, IE7 et IE6. Dans ce cas, la solution la plus simple consiste à utiliser la fonction jQuery.grep qui fait exactement la même chose, mais qui nécessite d'inclure jQuery sur la page.

Array.filter

Voilà un exemple qui défini un tableau, une liste de fruits, avec certains éléments qui sont vides :

var fruits = ['orange', 'citron', 'banane', null, 'noix', '', undefined, 'fraise'];
var fruits_filtre = fruits.filter( function(val){return val !== ''} );

Ça fonctionne, mais uniquement pour les cellules dont la valeur est une chaine de caractère vide. Il faut l'améliorer pour qu'elle supprime aussi l'élément lorsque la valeur de l'élément peut être assimilé à une case vide, comme les constantes null, NaN ou undefined :

Après avoir lu réafficher une colonne masquée dans excel vous en saurez d'avantage sur ce sujet.

var fruits = ['orange', 'citron', 'banane', null, 'noix', '', undefined, 'fraise'];
var fruits_filtre = fruits.filter(function(val){
	if( val == '' || val == NaN || val == undefined || val == null ){
		return false;
	}
	return true;
});
console.log(fruits_filtre);

jQuery.grep

Et maintenant, exactement le même exemple, mais en utilisant la fonction $.grep de jQuery à la place (la seule différence, à part le nom de la fonction, c'est que la fonction grep ne fait pas partie du prototype de l'objet Array comme c'est le cas pour filter, donc il faut passer le tableau à filtrer en paramètre à la fonction grep) :

var fruits = ['orange', 'citron', 'banane', null, 'noix', '', undefined, 'fraise'];
var fruits_filtre = jQuery.grep(fruits, function(val){
	if( val == '' || val == NaN || val == undefined || val == null ){
		return false;
	}
	return true;
});
console.log(fruits_filtre);

Fini de lire cette page ? allez faire un tour ici : incruster un texte 3d, ça peut vous intéresser.