[SOLUCIONADO] Mostrar en un select los elementos de un array sin repetir

[pedromir]

Hola

Tengo un Select y saco los datos de los options de un array, pero en este array hay algunos elementos que están repetidos y necesito que en el select al mostrar dichos elementos estos no se repitan, en el caso del ejemplo, al deplegar el Select nos aparecería dos veces el fútbol, como podría hacer para que se muestre una sola vez?.
Gracias

Código Javascript:

var deportes = new Array();
deportes = [['Jose','futbol'],
['Luis','balonmano'],
['Antonio','baloncesto'],
['Mario','futbol']];
 
function cambiar(){
    
  var despleDeportes = document.getElementById("despleDeportes");  
  for (var i = 0; i < deportes.length; i++) {     
    despleDeportes.options[i] = new Option (deportes[i][1]);    
    despleDeportes.options[i].value = deportes[i[1]];
    despleDeportes.options[i].text = deportes[i][1];
   }
   despleDeportes.options[0].selected.text=1;  
}
 

Código HTML:

<select id="despleDeportes">
  <option>Todas los deportes</option>  
  </select>
 

[PHPeros]

Los de PHPJS hicieron una transcripción del array_unique() de PHP para Javascript:

http://phpjs.org/functions/array_unique/

Sería cuestión de pasar el array por dicha función y guardar el resultado obtenido

[Alexis88]

O también puedes construir tu propia función de filtrado que retorne un array con valores únicos:

Código Javascript:

var array_unique = function(array){
    var array_filtrado = [];
        if (!Array.prototype.forEach){
            var total = array.length;
            for (var i = 0; i < total; i++)
                if (!Array.prototype.indexOf){
                    var repeticiones = false;
                    for (var j = i + 1; j < total; j++)
                        if (array[i] == array[j]){
                            repeticiones = true;
                            break;
                        }
                    if (repeticiones) array_filtrado.push(array[i]);
                }
                else
                    if (array_filtrado.indexOf(array[i]) == -1) 
                        array_filtrado.push(array[i]);
        }
        else
            array.forEach(function(valor){
                if (array_filtrado.indexOf(valor) == -1)
                    array_filtrado.push(valor);
            });
        return array_filtrado;
    };
 
console.log(array_unique([1, 3, 4, 2, 1, 2, 1, 3, 1])); //[1, 3, 4, 2] 
console.log(array_unique([5, 5, 1, 2, 1, 4, 5])); //[5, 1, 2, 4]
 

Saludos

[pedromir]

Gracias a los dos por responder

He probado con el código de Alexis y funciona si el array tiene un elemento sólo, como en este caso

Código Javascript:

var deportes = new Array();
deportes = ['futbol','balonmano','baloncesto','futbol'];
 

Pero si tiene varios y necesito que me muestre el segundo, el que corresponde con el deporte, como este ejemplo de abajo, ya no funciona y poniendo array[i][1] para indicar que es el segundo elemento sobre el que tiene que actuar deberia funcionar, pero no es así, algo se me escapa

Código Javascript:

var deportes = new Array();
deportes = [['Jose','futbol'],
['Luis','balonmano'],
['Antonio','baloncesto'],
['Mario','futbol']];
 

[Alexis88]

Solo era cuestión de que adaptes la función a tus necesidades.

Código Javascript:

var array_unique = function(array){
    var coincidencias = [],
        array_filtrado = [];
        if (!Array.prototype.forEach){
            var total = array.length;
            for (var i = 0; i < total; i++)
                if (!Array.prototype.indexOf){
                    var repeticiones = false;
                    for (var j = i + 1; j < total; j++)
                        if (array[i][1] == array[j][1]){
                            repeticiones = true;
                            break;
                        }
                    if (repeticiones) array_filtrado.push(array[i]);
                }
                else
                    if (array_filtrado.indexOf(array[i][1]) == -1) 
                        array_filtrado.push(array[i]);
        }
        else
            array.forEach(function(valor){
                if (coincidencias.indexOf(valor[1]) == -1){
                    coincidencias.push(valor[1]);
                    array_filtrado.push(valor);
                }
            });
        return array_filtrado;
    },
    deportes = [
        ['Jose', 'futbol'],
        ['Luis', 'balonmano'],
        ['Antonio', 'baloncesto'],
        ['Mario', 'futbol']
    ];
 
document.body.innerHTML = array_unique(deportes).join("<br />");
 

Lo anterior imprimirá lo siguiente:

Código HTML:

Jose,futbol
Luis,balonmano
Antonio,baloncesto
 

Saludos

[josemar2000]

Ahora si funciona he hecho algunas modificaciones para que me muestre sólo los elementos del campo deporte que es lo que necesito y el código ha quedado así

Código Javascript:

var array_unique = function(array){
     var coincidencias = [],
         array_filtrado = [];
         if (!Array.prototype.forEach){
             var total = array.length,
                 repeticiones = 0;
             for (var i = 0; i < total; i++)
                 if (!Array.prototype.indexOf){
                     repeticiones = 0;
                     for (var j = i + 1; j < total; j++)
                         if (array[i][1] == array[j][1]){
                             repeticiones++;
                             break;
                         }
                     if (!repeticiones) array_filtrado.push(array[i]);
                 }
                 else
                     if (array_filtrado.indexOf(array[i][1]) == -1)
                         array_filtrado.push(array[i]);
         }
         else
             array.forEach(function(valor){
                 if (coincidencias.indexOf(valor[1]) == -1){
                     coincidencias.push(valor[1]);
                     array_filtrado.push(valor[1]);
                 }
             });
         return array_filtrado;
     };
 

Pero la función esta la necesito, como he explicado al principio para un select y necesito que cada deporte sea una opción dentro del select, ya que al pulsar en cada uno de los deportes hará una cosa.
Este es el select modificado con tu función pero lógicamente, no lo he hecho bien porque me muestra todos los deportes en una sóla linea.

Código Javascript:

function cambiar(){
    
  var despleDeportes = document.getElementById("despleDeportes");  
  for (var i = 0; i < deportes.length; i++) {   
    despleDeportes.options[i] = new Option (array_unique(deportes));    
    despleDeportes.options.value = (array_unique(deportes));
    despleDeportes.options.text = (array_unique(deportes));
    despleDeportes.options[i].value = "Valor";  
   }
   despleDeportes.options[0].selected=1;    
}
 

Código HTML:

<body onload="cambiar()">
 <select id="despleDeportes">
  <option>Todos los deportes</option>  
  </select>
 

[Alexis88]

El problema está en que por cada opción añades al array entero de deportes cuando lo que debes de hacer es recorrer a dicho array y en cada iteración añadir cada una de sus opciones al <select>.

Código Javascript:

var array_unique = function(array){
    var coincidencias = [],
        array_filtrado = [];
        if (!Array.prototype.forEach){
            var total = array.length;
            for (var i = 0; i < total; i++)
                if (!Array.prototype.indexOf){
                    var repeticiones = false;
                    for (var j = i + 1; j < total; j++)
                        if (array[i][1] == array[j][1]){
                            repeticiones = true;
                            break;
                        }
                    if (repeticiones) array_filtrado.push(array[i]);
                }
                else
                    if (array_filtrado.indexOf(array[i][1]) == -1) 
                        array_filtrado.push(array[i]);
        }
        else
            array.forEach(function(valor){
                if (coincidencias.indexOf(valor[1]) == -1){
                    coincidencias.push(valor[1]);
                    array_filtrado.push(valor[1]);
                }
            });
        return array_filtrado;
    },
    deportes = [
        ['Jose', 'futbol'],
        ['Luis', 'balonmano'],
        ['Antonio', 'baloncesto'],
        ['Mario', 'futbol']
    ];
 
var opciones = array_unique(deportes),
    total = opciones.length,
    lista = document.getElementById("despleDeportes");
 
for (var i = 0; i < total; i++){
    var opcion = document.createElement("option");
    opcion.value = opciones[i];
    opcion.innerHTML = opciones[i];
    lista.appendChild(opcion);
}
 

Saludos

[pedromir]

Ahora si funciona perfectamente, muchas gracias