Problema con la recursividad

[gbmcarlos]

Buenas,

después de buscar por el foro y por internet en general, me he desesperado y he venido aquí.

Estoy intentando crear un árbol de directorios con JavaScript. Para ello, recibo del servidor una cadena de texto con las rutas de los archivos y directorios, que separo con "split()" para tener un array de los mismos, quedándome algo así:

[0]raiz/archivo1.txt
[1]raiz/archivo2.txt
[2]raiz/carpeta1
[3]raiz/carpeta1/archivo3.txt
[4]raiz/carpeta2
[5]raiz/carpeta2/archivo4.txt
[6]raiz/archivo5.txt

Esta es la estructura que he creado para poder comprobar que funciona siempre. No tengo ningún problema para recorrer el array, ni para detectar si es un archivo o un directorio. El código de la función recursiva que uso es este:

Código Javascript:

function crearArbol(ruta,nivel) {
 
 nivel++;
 
 for (i=0;i<elementos.length;i++) {
 
  elemento = elementos[i];
 
  elemento2 = elemento.split("/");
 
  nombre = elemento2.pop();
 
  ruta2 = elemento2.join("/");
 
  if (ruta2 == ruta) {
 
   if (nombre.lastIndexOf(".") != -1) {
 
    document.getElementById("capaCuerpo" + ruta).innerHTML += "<div style='display:inline; margin-left:15px; float:left; clear:both;'>" + nombre + "<br></div>";
 
   } else {
 
    document.getElementById("capaCuerpo" + ruta).innerHTML += "<div style='display:inline; float:left; clear:both'><img id='capa" + elemento + "' src='icono_arbol_mas.jpg' onclick='arbolMostrarOcultarCuerpo(this.id)' style='cursor:pointer; float:left; margin-right:5px; margin-top:3px;'><div style='display:inline; cursor:pointer; float:left;' onclick='crearCapaVer(" + "\"" + elemento + "\"" + ")'>" + nombre + "</div><div id='capaCuerpo" + elemento + "' style='display:block; margin-left:" + 15*(nivel+1) + "px;'></div></div>";
 
    crearArbol(elemento,nivel);
 
   }
 
  }
 
 }
 
}
 

Los innerHTML funcionan perfectamente. Llamo inicialmente a la función con un:

crearArbol(elementos,-1);

donde elementos es el array.

El problema que tengo es que, al llamarse a si misma la función, la nueva iteración funciona bien, pero la iteración anterior, la que ha llamado a la segunda, no sigue su curso. Es decir, en el ejemplo del array que he puesto, se detiene en "raiz/carpeta1/archivo3.txt".

Si me pudieran ayudar me harían un gran favor, ya que llevo días intentando resolver esto.

Gracias.

[David]

Porque estás reescribiendo el valor de i en el ámbito global. Prueba:

Código Javascript:

for (var i = 0; i < elementos.length; i++) {
 

[gbmcarlos]

Dios mio... no puede ser!

Aunque tiene mucho sentido. en cada iteración se crea una nueva variable i, y antes se creaba una y se modificaba cada vez, no?

Muchísimas gracias, de verdad, funciona a la perfeccion.,

[David]

Iniciado por gbmcarlos

Aunque tiene mucho sentido. en cada iteración se crea una nueva variable i, y antes se creaba una y se modificaba cada vez, no?

No es en cada iteración, sino cada vez que se inicia el for (al llamar recursivamente a la función)

Siempre hay que tener cuidado con las variables globales.

Saludos.