Los Foros
http://foros.espaciolatino.com/

Insertar un array dentro de otro y mostrar su contenido
http://foros.espaciolatino.com/viewtopic.php?f=2&t=610
Página 1 de 2

Autor:  pedromir [ 08 Nov 2013 15:15 ]
Asunto:  Insertar un array dentro de otro y mostrar su contenido

Hola, a ver si me podeis echar una mano.
Tengo un array que a través de un innerHTML me crea unos div y me muestra una serie de datos, en uno de esos div me tiene que mostrar
unas fotos que las tiene que coger de otro array, estas fotos se tienen que corresponder, en el ejemplo, con la fruta que se está mostrando
en ese momento, o sea, sería sustituir las fotos del div miniaturas por las contenidas en el array.
El segundo elemento en el array nombreFrutas, lógicamente es el nombre de la imagen principal

Código:
var nombreFrutas = [["pera","f_pera1"],
                ["manzana","f_manzana1"],
                ["melocoton","f_melocoton1"],
                ["naranja","f_naranja1"],
                ["mandarina","f_mandarina1"],
                ["Melon","f_melon1"]];

var f_pera = new Array();
f_pera = [["f_pera1"],
["f_pera2"],
["f_pera3"],
["f_pera4"],
["f_pera5"],
["f_pera6"],
["f_pera7"],
["f_pera8"]];

var f_manzana = new Array();
f_manzana = [["f_manzana1"],
["f_manzana2"],
["f_manzana3"],
["f_manzana4"],
["f_manzana5"],
["f_manzana6"]];   

var f_melocoton = new Array();
f_melocoton = [["f_melocoton1"],
["f_melocoton1"],
["f_melocoton1"],
["f_melocoton1"]];   


         document.getElementById("lFrutas").innerHTML += "<div class=frutas><div class=cabecera> \
    <div class=nombre>" + array[i][0] + "</div></div> \
    <div class=columnaImagenes><div class=imagenPrincipal>
   <img src="images/" + array[i][1] + ".jpg"></div> \
    <div class=miniaturas> \
   <img src=images/f_pera1.jpg> \      
   <img src=images/f_pera2.jpg> \      
    <img src=images/f_pera3.jpg> \
    <img src=images/f_pera4.jpg> \
    <img src=images/f_pera5.jpg> \
   <img src=images/f_pera6.jpg> \
    </div></div> \
   <div class=columnaDescripcion><div class=descripcion>" + array[i][3] + "</div> \
   </div></div>";   
   }


Autor:  editor [ 09 Nov 2013 13:13 ]
Asunto:  Re: Insertar un array dentro de otro y mostrar su contenido

Así de entrada veo un problema con las comillas al insertar en el innerHTML, usa esto
'<div class=frutas><div class=cabecera><div class=nombre>' + nombreFrutas[i][0] + '</div></div><div class=columnaImagenes><div class=imagenPrincipal><img src="images/' + nombreFrutas[i][1] + '.jpg"></div><div class=miniaturas><img src=images/f_pera1.jpg><img src=images/f_pera2.jpg><img src="images/f_pera3.jpg"><img src="images/f_pera4.jpg"><img src="images/f_pera5.jpg"><img src="images/f_pera6.jpg"></div></div><div class=columnaDescripcion><div class=descripcion>' + nombreFrutas[i][3] + '</div></div></div>';

Tenías también puesto array, supongo que será nom breFrutas, sino pon el que corresponda pero al colocar array te da un error de variable no definida y no muestra nada.

Saludos

Autor:  pedromir [ 10 Nov 2013 13:37 ]
Asunto:  Re: Insertar un array dentro de otro y mostrar su contenido

En cuanto al nombre del array lo tengo puesto así porque lo tengo declarado de esta manera.
Código:
var nombreFrutas = new Array();
nombreFrutas = [["pera","f_pera1"],
["Melon","f_melon1"]];

por eso en el innerHTML ya no utilizo nombreFruta y en su lugar pongo array y todo funciona perfectamente y la solución que tu me propones es la misma que estoy utilizando ahora mismo y no es eso lo que yo busco.

Lo que yo estoy buscando, es que todas las imagenes que se muestran en el div miniaturas salgan de un array y no meterlas manualmente, y lógicamente tienen que salir del array que contenga las fotos que se corresponde con el array[i][0] por eso he creado un array de fotos por cada objeto que hay en el array nombreFrutas, de esa forma si yo quiero que me muestre la fruta melocoton pondria [2][0] y me mostraría todos los elementos correspondientes a ese objeto incluyendo sus fotos, que me las mostraría en el div miniaturas y sacadas de su array correspondiente, que en este caso sería este.
Código:
 
var f_melocoton = new Array();
f_melocoton = [["f_melocoton1"],
["f_melocoton1"],
["f_melocoton1"],
["f_melocoton1"]];


Saludos

Autor:  editor [ 11 Nov 2013 20:23 ]
Asunto:  Re: Insertar un array dentro de otro y mostrar su contenido

A ver si lo entendí:
Tu quieres que el bloque DIV se llene a partir del array. Y supongo que quieres un bloque div para cada fruta ¿es así?
Puedes usar la función eval
He cambiado un poco el código por claridad (eso espero)
Si go obteniedo error si uso array como variable, así que uso nombreFrutas

nFruta = nombreFrutas[i][0];
iFruta = "f_"+nFruta;
Contenido = '<div class="frutas"><div class="cabecera"><div class="nombre">' + nFruta + '</div></div>';
Contenido += '<div class="columnaImagenes"><div class="imagenPrincipal"><img src="images/' + nombreFrutas[i][1] + '.jpg">'+nombreFrutas[i][1]+'</div><div class=miniaturas>';
numImgs = eval(iFruta).length;
for (j=0; j<= numImgs; j++)
{
Contenido += '<img src="images/'+ eval(iFruta+'['+j+']')+'.jpg" alt="'+iFruta+j+'">';
}
Contenido += '</div></div><div class=columnaDescripcion><div class=descripcion>' + nombreFrutas[i][3] + '</div></div></div>';
document.getElementById("Frutas").innerHTML += Contenido;

Esto lo tengo dentro de una función con un argumento que es el número de la fruta que voy a mostrar.
Si quieres mostrar todas no uses argumento y coloca todo dentro de un bucle for. Iría delante de nFruta y sería de la forma
for(i=0; i <= nombreFrutas.length; i++)
{el código que he puesto arriba}

En esta forma el bloque DIV miniaturas se llena con los datos sacados del array nombreFruts y los f_pera, f_manzana....

¿Era esto?
Saludos

Autor:  pedromir [ 12 Nov 2013 01:32 ]
Asunto:  Re: Insertar un array dentro de otro y mostrar su contenido

Si, eso era lo que estaba buscando, al principio me salían las 8 imagenes
["f_pera8"]]; y un cartelito debajo de las fotos con el texto f_pera8
así que he modificado este for
for (j=0; j<= numImgs; j++)
le he quitado el signo igual y lo he dejado así
for (j=0; j< numImgs; j++)
y ya ha desaparecido el cartelito así que ya sale bien, supongo que sería porque el array empieza a contar desde 0 y las fotos son 8 empezando a contar desde el 1 así que me muestra una más, pero el texto, no la foto.

Ahora en esta línea, donde van las fotos del array fotos
Contenido += '<img src="images/'+ eval(iFruta+'['+j+']')+'.jpg" alt="'+iFruta+j+'">';
necesito meter esta función para que al pulsar sobre cualquier miniatura me la ejecute y no soy capaz, no se si es un problema de las comillas, que no las pongo bien
onclick=document.getElementById('imgCambiaFoto').src=this.src;

Lo que necesito es esto, que es como lo tenia antes de utilizar el array para las miniaturas
<img src=images/f_pera8.jpg onclick=document.getElementById('imgCambiaFoto').src=this.src;

Autor:  pedromir [ 12 Nov 2013 11:19 ]
Asunto:  Re: Insertar un array dentro de otro y mostrar su contenido

Por fin he conseguido incluir el evento onclick, visto así es muy fácil, pero el otro día no hubo manera, siempre me daba error, sería algún problema de comillas como te comenté, te paso el código para que veas como ha quedado.
Código:
Contenido += '<img src="imagesInfor2/'+ eval(iFruta+'['+j+']')+'.jpg" alt="'+iFruta+j+'" title="'+titleTexto+'" onclick=document.getElementById("imgCambiaFrutas").src=this.src;>';

Seguramente el código este:
Código:
document.getElementById("imgCambiaFrutas").src=this.src;>';

se pueda hacer de otra manera, con alguna función, pero lo he intentado y no lo he conseguido, pero como así funciona no me preocupa demasiado.

Lo que si necesito resolver y de ahí viene todo esto, es poder abrir la página donde se encuentran los arrays de frutas mostrando la fruta que yo quiera pinchando en los enlaces que hay en otra página.
Me explico
Tengo una página que se llama pruebas.html y otra que se llama arrayFrutas.html, que es donde se encuentran los arrays de frutas que hemos construido, en pruebas.html tengo 3 enlaces, y necesito que pinchando en ellos me abran la página de frutas, pero mostrándome la fruta correspondiente,
mostrarFrutas sería el nombre de la función.

Código:
 
<p><a href="javascript:mostrarFrutas('arrayFrutas','nombreFrutas[i][pera')">Pera</a></p>
<p><a href="javascript:mostrarFrutas('arrayFrutas','nombreFrutas[i][manzana')">Manzana</a></p>
<p><a href="javascript:mostrarFrutas('arrayFrutas','nombreFrutas[i][melocoton')">Melocoton</a></p>


Saludos

Autor:  editor [ 12 Nov 2013 19:04 ]
Asunto:  Re: Insertar un array dentro de otro y mostrar su contenido

Hola
Si, efectivamente el límite del bucle debe ser < tamaño del array porque se empieza a contar en 0.
Lo de mostrar una fruta según diga el enlace desde otra página lo consigues psando parámetros por la dirección URL.
En este caso es muy simple si solo necesitas un parámetro
En pruebas.htm colocas el enlace de la siguiente forma
arrayFrutas.html?manzana

En arrayFrutas extraes el valor del parámetro

var frutaMostrada = String( window.location.href ).split('?');

En frutas mostrada tienes el nombre de la fruta, buscas en el array el índice correspondiente a ese nombre y llamas a la función que tienes construida y que funciona
Eso si quieres usar nombres, si quieres colocar índices pues
arrayFrutas.html?1
índice = String( window.location.href ).split('?') ;

En cualquier caso tendrás que asegurarte que el nombre o el índice de la fruta es correcto, si no existe pues dar algún mensaje o lo que tu ya veas.

En lo de que si el código funciona pues bien... asegúrate que funciona en los tres grandes Chorme, Iexplorer y Mozilla. Que IExplore no es el mayoritario en la red y, aunque tienden a normalizarse, siguen existiendo diferencias.

Saludos

Autor:  pedromir [ 14 Nov 2013 01:18 ]
Asunto:  Re: Insertar un array dentro de otro y mostrar su contenido

El código este que me has pasado no me funciona, supongo que será porque no lo he utilizado correctamente
índice = String( window.location.href ).split('?') ;

Así que he utilizado este otro que si me funciona
indice = location.search.substr(1).split ('&');
var ini = indice;

He sustituido todos los indices [i] de la página por la variable [ini] cuyo valor lo recojo del enlace de la otra página (pruebas.html) y funciona.
<a href="arrayFrutas.html?0" target="_new">
Utilizo el indice, aunque yo preferiría utilizar el nombre, ya que el objeto no va a estar siempre en la misma posición y por tanto su índice va a variar, pero no he conseguido que con el nombre me funcione.

Saludos

Autor:  editor [ 14 Nov 2013 02:32 ]
Asunto:  Re: Insertar un array dentro de otro y mostrar su contenido

Hola
perdona, te puse el código mal
var src = String( window.location.href ).split('?');

src es una matriz con el url y el valor detrás de ? (puedes usar ? como separador o cualquier otro como el que indicas, & o #... a tu gusto)
El parámetro que va después del separador (? o el que uses) en la url está en src[1]

O sea, si el enlace es http://sitio.com/frutas.htm?manzana

Pues src[1] contiene la palabra manzana.

Una vez has hecho esto llamas a la función que rellena el div con este parámetro (src[1]), osea, escribeDiv(src[1])

Y en la función haces un recorrido por el array con nombres hasta encontrar el que le pasas y ya tienes el índice

escribeDiv(nombre)
Aquí describes los arrays y demás
i=0;
while(nombre != nombreFrutas[i][0])
{
i++
}
Ya tienes el vaor de i (el índice) Y ahora pasarías a rellenar el div, ya tienes el índice de la fruta que quieres mostrar.

Y creo que con esto tienes lo que quieres, podrías refinarlo un poco por ejempo al buscar el nombre de la fruta, para que coincida mayúsculas con minúsculas si te viene bien...

Saludos

Autor:  pedromir [ 15 Nov 2013 09:57 ]
Asunto:  Re: Insertar un array dentro de otro y mostrar su contenido

Ya me funciona todo perfectamente, ya he creado la función para utilizar el nombre de la fruta en vez del indice, puesto que la primera opción es más versátil, la posición de una fruta determinada puede variar, hoy puede estar en el primer lugar y mañana en el tercero, pero su nombre no.
Y por último quería que me aclararas una cosa, como información, ya que este tema es nuevo para mí, que diferencia hay entre estos dos códigos, el src y el search, porque en mi caso funcionan los dos, de hecho como el src no me fucionaba he estado utilizando el otro, pero ahora ya si utilizo el src porque es el que tu me has indicado.

var src = String( window.location.href ).split('?');
location.search.substr(1).split ('?');

Saludos

Página 1 de 2 Todos los horarios son UTC + 1 hora
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/