Os pongo en situación. Quería pasar desde PHP un array a una función Javascript. En esa función Javascript necesitaba hacer un bucle que me recorriera desde el primer elemento hasta el último, por lo que necesitaba conocer el número total de elementos.
Sin percatarme de los sabios consejos de Moisés acerca de la existencia de la propiedad length existente también para arrays, busco funciones como sizeof o count (existentes en PHP) para desarrollar en Javascript de forma más cómoda.
Por curiosidad busqué referencia sobre el asunto y me topé con el sitio Web de Kevin Vanzonneveld, en el que ofrecen un archivo php.js que contiene una serie de funciones PHP portadas a Javascript de manera impecable. En el sitio de Kevin se relatan las 212 funciones portadas hasta ahora.
En mi caso, sólo tuve que descargar el mencionado fichero php.js, enlazarlo con una etiqueta script y utilizar la función count como si lo hiciera con PHP de forma normal para contar el número de elementos de un array o descomponer cadenas en array seccionando según un carácter. Os dejo con un ejemplo que completaré en una próxima entrada. Lógicamente se podrían haber utilizado las propiedades nativas de Javascript length y split para desarrollar el ejemplo, pero así vemos una prueba para otras funciones de esta librería que no estén desarrolladas de forma nativa en Javascript.
[Javascript]var numero = 0;
// esta funcion añade un nuevo 'dd' al div principal con el contenido especificado
// recibe el evento disparado y dos arrays: el primero con las IDs de los campos
// select y el segundo con las IDs de las opciones que irán dentro de cada select
function addCampo(evento, array, ids) {
newID = 'articulos_' + (++numero) // genero una nueva ID
nDD = document.createElement('dd')
nDD.id = 'dd_' + numero
bold = document.createElement('b') // creo una etiqueta en negrita
bold.innerHTML = "Artículo relacionado: "
myselect = document.createElement("select") // creo un elemento <select>
myselect.name = "articulos[]" // le pongo de nombre el de un array previamente inicializado en PHP
myselect.id = newID
// aquí puedo utilizar la función explode al haber importado php.js, obteniendo los mismos
// resultados que en PHP, es decir, me separará en un array el resultado de descomponer
// la cadena separada por comas
var newArray = explode(',', array)
var newIDs = explode(',', ids)
// aquí puedo utilizar la función count de forma normal porque he incluido en el archivo .php
// correspondiente la importación de php.js. Como puede verse, puedo recorrer de forma normal
// el array incluyendo la funcion count dentro de mi for de Javascript
for (i=0;i<count(newArray);i++)
{
if (newArray[i] != ',' && newArray[i] != '')
{
// voy creando dinamicamente las opciones (<option>) para el <select>
// en base a los datos que he recibido como parámetros de la función
theOption = document.createElement("OPTION")
theText = document.createTextNode(newArray[i])
theOption.appendChild(theText)
theOption.id = newIDs[i]
theOption.name = newIDs[i]
theOption.value = newIDs[i]
myselect.appendChild(theOption)
}
}
// creo un enlace que me servirá para eliminar elementos <select>
// incluidos dentro de un DD
a = document.createElement('a')
a.name = nDD.id
a.href = '#'
a.onclick = elimCamp
a.innerHTML = ' Eliminar'
// adjunto todos los elementos al DD
nDD.appendChild(bold)
nDD.appendChild(myselect)
nDD.appendChild(a)
// al contenedor que tengo en la página PHP le adjunto el DD creado
container = document.getElementById('tabla')
container.appendChild(nDD)
}
//con esta función eliminamos el campo cuyo link de eliminación sea presionado
function elimCamp(evt){
evt = evento(evt)
nCampo = rObj(evt)
div = document.getElementById(nCampo.name)
div.parentNode.removeChild(div)
}
//con esta función recuperamos una instancia del objeto que disparo el evento
rObj = function (evt) {
return evt.srcElement ? evt.srcElement : evt.target;
}
//esta funcion nos devuelve el tipo de evento disparado
evento = function (evt) {
return (!evt) ? event : evt;
}
[/Javascript]
Sé el primero en valorar positivamente
Busca la propiedad length. En Javascript se utiliza para saber la longitud de las cadenas. Y es igualmente válido para los arrays. Así que no te hace falta importar ningún otro archivo.
¡Cierto! Olvidé la propiedad length para contar el número de elementos de un array y pensé en ella sólo como contador de caracteres >_< …
En este caso creo que sí me hace falta importar este archivo puesto que la función explode pienso que no tiene equivalente en Javascript.
Modificaré el artículo para que haga referencia a esta función en lugar de a count, puesto que al ofrecerla Javascript por defecto no tiene sentido importarla.
Un saludo y gracias!
Aunque ahora que lo pienso, también se puede utilizar ‘split’ como ‘explode’ jejeje, aunque creo recordar que me daba algún tipo de error y bueno, fue realmente cómodo usar este port. Podría titularlo: port para vagos en aprender Javascript en condiciones xDD!
jajajaja Buen título 🙂
Y siguiendo con lo del otro día … librerías como jQuery incluyen también más opciones para el trabajo con Arrays y cosas de esas. Por si te sirve 🙂
Hola neonigma.
Tengo un problema con un select múltiple generado con php y quiero gestionarlo con javascript.
En un formualrio tengo 24 preguntas (obtenidas desde una tabla de mysql), cada pregunta debe tener su select múltiple para responderla (que depende del número de preguntas e igual obtengo las respuestas de otra tabla, todo esto para hacer dinámico el cuestionario).
El punto es que quiero validar que el usuario no mande la opcion con valor cero (que sería elige una respuesta), he tratado de gestionar esto por medio del id del select pero no funciona ya que todos los selects tienen el mismo id.
Te dejo el enlacedonde muestro mi duda.
Gracias por tu tiempo.
Excelente blog!
Mauricio, a lo mejor te ayudan esta entrada y esta otra.