Tengo el siguiente código JS,HTML y PHP:
$(document).ready(function() {
var ruta;
ruta = document.querySelector('#valueDoc2020');
cargarDatos(ruta);
ruta = document.querySelector('#valueInstanciaGeneral');
cargarDatos(ruta);
ruta = document.querySelector('#valueRecursosHumanos');
cargarDatos(ruta);
ruta = document.querySelector('#valueRentaExaciones');
cargarDatos(ruta);
ruta = document.querySelector('#valueServiciosSociales');
cargarDatos(ruta);
function cargarDatos(ruta) {
$.ajax({
type: "GET",
url: 'index.php',
datatype: 'json',
data: { "ruta": ruta.value },
success: function(lista) {
let respuesta = document.querySelector("#" + ruta.name);
let convertido = JSON.parse(lista);
console.log(respuesta);
console.log(JSON.parse(lista));
//crearDatos(respuesta.id, convertido, ruta.value);
}
});
}
function crearDatos(id, convertido, ruta) {
$.each(convertido, function(i, item) {
console.log(item);
if (Array.isArray(convertido)) {
crearArchivo(id, ruta, item);
} else {
let string = "";
string = crearCarpeta(id, ruta, i);
$("#" + id).append(string);
}
});
}
});
function crearArchivo(id, ruta, item) {
$("#" + id).append('<li><div><i class="fas fa-file mr-2"></i><a download href="' + ruta + item + '"> ' +
item + '</a></div></li>');
}
<div class="container ">
<div class="treeview-colorful border border mx-4 my-4 mt-5 mb-5">
<h6 class="pt-3 pl-3">Carpetas</h6>
<hr>
<ul class="treeview-colorful-list mb-3">
<li class="treeview-colorful-items">
<a class="treeview-colorful-items-header">
<i class="fas fa-plus-circle"></i>
<span><i class="far fa-folder-open ic-w mx-1"></i>DOCUMENTOS_2020</span>
</a>
<ul class="nested" style="display: none;" id="doc2020">
<input type="hidden" name="doc2020" id="valueDoc2020" value="./DOCUMENTOS_2020/">
</ul>
</li>
<li class="treeview-colorful-items">
<a class="treeview-colorful-items-header">
<i class="fas fa-plus-circle"></i>
<span><i class="far fa-folder-open ic-w mx-1"></i>INSTANCIA GENERAL</span>
</a>
<ul class="nested" id="instanciaGeneral">
<input type="hidden" name="instanciaGeneral" id="valueInstanciaGeneral" value="./INSTANCIA GENERAL/">
</ul>
</li>
<li class="treeview-colorful-items">
<a class="treeview-colorful-items-header">
<i class="fas fa-plus-circle"></i>
<span><i class="far fa-folder-open ic-w mx-1"></i>RECURSOS HUMANOS</span>
</a>
<ul class="nested" id="recursosHumanos">
<input type="hidden" name="recursosHumanos" id="valueRecursosHumanos" value="./RECURSOS HUMANOS/">
</ul>
</li>
<li class="treeview-colorful-items">
<a class="treeview-colorful-items-header">
<i class="fas fa-plus-circle"></i>
<span><i class="far fa-folder-open ic-w mx-1"></i>RENTA Y EXACCIONES</span>
</a>
<ul class="nested" id="rentaExaciones">
<input type="hidden" name="rentaExaciones" id="valueRentaExaciones" value="./RENTAS Y EXACCIONES/">
</ul>
</li>
<li class="treeview-colorful-items">
<a class="treeview-colorful-items-header">
<i class="fas fa-plus-circle"></i>
<span><i class="far fa-folder-open ic-w mx-1"></i>SERVICIOS SOCIALES</span>
</a>
<ul class="nested" id="serviciosSociales">
<input type="hidden" name="serviciosSociales" id="valueServiciosSociales" value="./SERVICIOS SOCIALES/">
</ul>
</li>
</ul>
</div>
</div>
<?php
//función para obtener el nombre de las carpetas y los archivos en array multidimensional
function dirToArray($dir)
{
//creo un array
$listDir = array();
//abro los directorios contenidos en $dir
if ($handler = opendir($dir)) {
//leo todos los elementos contenidos
while (false !== ($file = readdir($handler))) {
//verifico que hayan elementos
$info = new SplFileInfo($file);
if ($file != "." && $file != ".." && $info->getExtension() != "php" &&
$info->getExtension() != "js" && $info->getExtension() != "html") {
/**
* Si quieres la ruta haz esto
* $ruta = $dir . "/" . $file;
*/
/*si los elementos son archivos, guardo los elementos
en algún indice (dimensión) del array*/
if (is_file($dir . "/" . $file)) {
$listDir[] = $file;
/**
* Si quieres añadir la ruta del archivo en vez del nombre del archivo
* haz esto : $listDir[] = $ruta;
*/
/*si los elementos son directorios, guardo los elementos
en otro índice o dimensión, repitiendo hasta que hayan elementos*/
} elseif (is_dir($dir . "/" . $file)) {
/**
* Si quieres añadir la ruta del directorio en vez del nombre del directorio
* haz esto : $listDir[$dir . "/" . $file] = dirToArray($dir . "/" . $file);
*/
//$listDir[$file] = dirToArray($dir . "/" . $file);
$listDir[$file] = dirToArray($dir . "/" . $file);
}
}
}
closedir($handler);
}
return $listDir;
}
$array = dirToArray($ruta);
echo json_encode($array);
?>
Mi código se divide en 3 partes: Un archivo JS donde podemos ver una petición AJAX sencilla, el tipo de dato devuelto y donde quiero añadirlo, en este caso la etiqueta con el id respuesta.
Un archivo HTML sencillo con unos enlaces a los distintos archivos CSS y JS, además de la etiqueta antes mencionada.
Y un archivo PHP, donde recae mi pregunta: En este archivo PHP recorro una estructura de carpetas a partir de un parámetro que será la ruta. He conseguido que me muestre con la función echo() la estructura antes mencionada pero no consigo que me devuelva un string, cada vez que creo una variable de tipo cadena y la inicializó, además de devolverla al final con un return, está me devuelve una cadena totalmente vacía que se ver en el console.log(respuesta) del archivo JS.
Alguna forma de solventar este problema que me pueda ayudar.
datatype
, poniéndolo así:datatype: 'html',
dado que lo que devuelves desde el servidor es texto html, no un json. Si aún así no funciona entonces puede que haya otro problema en tu código de servidor.JSON.parse
ya que indicaste undatatype: 'json'
y devuelves un json desde el servidor. Ahora solamente tienes que leerlista
y mostrar esos datos en el elementorespuesta
.