0

Estimados necesito de su ayuda, ¿cómo puedo pasar este código a formato javascript? es un jquery que lee archivos de la carpeta donde está alojada la pagina y las incluye en un input select html:

<script type="text/javascript">

$(document).ready(function ()

        {
                $.ajax({
                    url: '.',
                    success: function (data) {
                       //console.log(data);
                        $(data).find("a:contains(.geojson)").each(function () {
                            $("#valores").append('<option value="'+ $(this).text() +'">'+ $(this).text() +'</option>');
                        });                 
                        
                    }
                });
        })
    </script>
<body>
<div id="fileNames"></div>
<select name="valores" id="valores">
</select>
</body>
</html>

agradecidos de su ayuda. Saludos!

3
  • Yo creo que es mucho menos codigo asi tal cual estas, porque si quieres hacer lo mismo con javascript puro sin usar librerias ni apis, el codigo se extendera posiblemente el doble o incluso el triple.
    – Layer
    Commented el 29 jun. 2020 a las 23:19
  • @Riven lo que pasa es que donde lo necesito tengo algunos problemas con la libreria de jquery y deseaba tener este fragmento de codigo como javascript, no importa si el código se extendiera Commented el 30 jun. 2020 a las 0:40
  • En esta página hay una guía: youmightnotneedjquery.com Commented el 30 jun. 2020 a las 1:41

1 respuesta 1

3

A tu preguntas le faltan detalles y se encuentra un poco desorganizada... tuve que acomodar un poco a fin de poder visualizarlo bien, ahora bien, para tu proposito he realizado el siguiente codigo:

window.onload = ()=>{

  function $ajax(body){
    return new Promise((res, rej)=>{
      const xhttp = new XMLHttpRequest();
      const data = new FormData();

      for(let prop in body){
        if(prop.toLowerCase() != 'url') data.append(prop, body[prop]);
      }

      xhttp.onload = ()=> res(xhttp.responseText);
      xhttp.onerror = e => rej(e.message);
      xhttp.open('POST', body.url, true);
      xhttp.send(data);
    });
  }
  
  $ajax({
    url: 'tu url aqui'      //debajo ira el cuerpo que deseas enviar al backend
  }).then(data =>{
    Array.from(document.querySelectorAll(data)).forEach(el =>{
      if(el.classList.contains("geojson")){
        let text = el.textContent;
        document.getElementById("valores").innerHTML += `<option value="${text}">${text}</option>`
      }
    });
  }).catch(e => console.error(e))

}
<html>
  <body>
    <div id="fileNames"></div>

    <select name="valores" id="valores">
    </select>
  </body>
</html>

La verdad es mucho por explicar, asi que lo explicare de manera rapida, primero tenemos el objeto Promise, que nos permite manejar codigo asincrono para obtener ya sea una respuesta o un error atravez de sus metodos then o catch.

El objeto XMLHttpRequest es principalmente nuestra peticion ajax, sin este objeto ajax no existiria.

A XMLHttpRequest se le pueden añadir cabeceras o incluso eventos, concretamente los mas importantes son el evento load, y el evento error, el evento load no necesariamente dicta que todo haya ido bien, simplemente que la peticion cargo, para comprobar que efectivamente la peticion se ha realizado de manera correcta tenemos a las propiedades readyState y status de XMLHttpRequest.

Para el caso del evento error, es buena idea tenerlo por si ocurre algun error rechazar la promesa con el mensaje de error.

Tenemos el objeto FormData que permite crear un objeto por pares de valores, una key y un value, algo parecido a un Object en javascript.

for(let prop in body){
   if(prop.toLowerCase() != 'url') data.append(prop, body[prop]);
}

Simplemente estamos recorriendo el objeto que se requiere como parametros y le estamos asignando tanto la clave como el valor a nuestro FormData por cada llave o valor que le hayamos pasado a body.

Tenemos tambien al metodo open, que sirve para indicarle a ajax qué metodo vamos a usar, hacia donde vamos hacer la peticion y si deseamos que la peticion sea sincrona o asincrona.

por ultimo:

xhttp.send(data);

Que envia los datos del FormData que teniamos.

$ajax({
    url: 'tu url aqui'      //debajo ira el cuerpo que deseas enviar al backend
  }).then(data =>{
    Array.from(document.querySelectorAll(data)).forEach(el =>{
      if(el.classList.contains("geojson")){
        let text = el.textContent;
        document.getElementById("valores").innerHTML += `<option value="${text}">${text}</option>`
      }
    });
  }).catch(e => console.error(e))

Acerca de esa parte de ahi, simplemente invocamos a nuestro $ajax, pasandole como parametro la url, hay que tener en cuenta que como no estamos usando jQuery, pasarle cabeceras o hacer otro tipo de cosas simplemente no funcionara como lo esperas, a menos que implementes las cabeceras en tu $ajax.

Array.from

Lo usamos porque document.querySelectorAll devuelve un HTMLCollection y NO un Array, por lo tanto debemos transformar ese HTMLCollection en un Array usando Array.from, para poder que podamos usar forEach.

if(el.classList.contains("geojson")){

Miramos si el actual objeto recorrido contiene la clase geojson, en cuyo caso:

let text = el.textContent;
document.getElementById("valores").innerHTML += `<option value="${text}">${text}</option>`

Obtenemos el texto dentro del elemento actual recorrido y lo almacenamos en text, luego obtenemos al elemento con id valores y le añadimos al final un <option> con ciertos valores dinamicos.

NOTA: esto de aqui:

`<option value="${text}">${text}</option>`

NO es propio de jQuery se llaman template strings y permiten renderizar javascript dentro de ${}.

2
  • gracias por tu respuesta. lo empecé a probar y me daba el error 405 (Method not Allowed) (por el metodo POST), lo cambié a GET y ahí me envió de vuelta un codigo html en el 'document' con los archivos listados, pero me dió error en lo siguiente: DOMException: Failed to execute 'querySelectorAll' on 'Document' en esta línea: Array.from(document.querySelectorAll(data)).forEach(el =>{ ¿es porque el document es una pagina html?. es el único error que esta entregando. Commented el 1 jul. 2020 a las 18:45
  • No deberias devolver HTML desde el servidor, es de las peores cosas que puedes hacer, siempre lo ideal es devolver desde el servidor un json con los datos, y desde el frontend (javascript) encargarte de crear elementos y rellenarlos con los datos traidos por el backend. ese error se debe a que document.querySelectorAll necesita ya sea un tagname (video), un id (#midiv) o una clase (.mielemento), como no se realmente que elemento ni con que clases o id te esta llegando deberas acomodar tu backend para que los datos que lleguen funcionen con querySelectorAll desde javascript.
    – Layer
    Commented el 1 jul. 2020 a las 21:48

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.