0

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.

3
  • Tienes que cambiar el 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.
    – A. Cedano
    Commented el 27 dic. 2019 a las 22:29
  • @A.Cedano, acabo de modificar el código y ya consigo que me devuelva pero ahora necesito ayuda para crear una forma de plasmar el array multidimensional en el html por medio de js como puedes ver en la modificación.
    – Miguel C
    Commented el 29 dic. 2019 a las 13:03
  • No necesitas aplicar JSON.parse ya que indicaste un datatype: 'json' y devuelves un json desde el servidor. Ahora solamente tienes que leer lista y mostrar esos datos en el elemento respuesta.
    – A. Cedano
    Commented el 29 dic. 2019 a las 21:02

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.