¿Puede un JSON complicarme tanto?

  • Autor Autor uncoderbyte
  • Fecha de inicio Fecha de inicio
U

uncoderbyte

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hola!, aquí mi cabeza pensado y pensando como puedo solucionar esto.
Tengo un autocomplete de MaterializeCSS en un formulario el cual tiene el siguiente código:
JavaScript: 
 var autocomplete_elems = document.querySelectorAll('.autocomplete');
var autocomplete_instances = M.Autocomplete.init(autocomplete_elems, autocomplete_options = {
data: {
    "Microsoft": null,
    "Apple": null
}});

Por supuesto que quiero cambiarle las opciones. Las mismas están en una petición (la cual funciona correctamente) que trae los valores convertidos a JSON, pero no me doy cuenta como hacer para agregarlos a las opciones del Autocomplete.

La consulta fetch es:
JavaScript: 
const req = await fetch("fetch.php", {
     header: "Content-type: application/json; charset=utf-8",
})
const data = await req.json();
let mydata = JSON.stringify(data);

Estuve literalmente Googleando todo el día y no encuentro manera. Estoy trabajando con JavaScript Vanilla.
 
Última edición:
const req = await fetch ("fetch.php" , {
header: "Content-type: application/json; charset=utf-8" ,
})
const data = await req. json();
let mydata = JSON .stringify (data);

autocomplete_instances = M.Autocomplete. init(autocomplete_elems, autocomplete_options = {
data: mydata});

No se si entendi bien
 
J0ss dijo:
const req = await fetch ("fetch.php" , {
header: "Content-type: application/json; charset=utf-8" ,
})
const data = await req. json();
let mydata = JSON .stringify (data);

autocomplete_instances = M.Autocomplete. init(autocomplete_elems, autocomplete_options = {
data: mydata});

No se si entendi bien
Hacer clic para expandir...

No funciona.

Eso lo tengo dentro de:

JavaScript: 
const myfuncion = async () => {

}

Supongo que es porque no llamo myfunction, pero si lo hago tengo problema con el alcanze de las variables.
Así el código completo ahora:
JavaScript: 
const myfuncion = async () => {
   const req = await fetch("fetch.php", {
  header: "Content-type: application/json; charset=utf-8",
})

  const data = await req.json();
  let mydata = JSON.stringify(data);
  let elems_autocomplete = document.querySelectorAll('.autocomplete');
  let instances = M.Autocomplete.init(elems_autocomplete, options);
}

myfuncion();

autocomplete_instances = M.Autocomplete.init(autocomplete_elems,
autocomplete_options = {
data: mydata
});
 
J0ss dijo:
const req = await fetch ("fetch.php" , {
header: "Content-type: application/json; charset=utf-8" ,
})
const data = await req. json();
let mydata = JSON .stringify (data);

autocomplete_instances = M.Autocomplete. init(autocomplete_elems, autocomplete_options = {
data: mydata});

No se si entendi bien
Hacer clic para expandir...

ACTUALIZO código:
JavaScript: 
const myfuncion = async () => {
const req = await fetch("fetch.php", {
    header: "Content-type: application/json; charset=utf-8",
})
const data = await req.json();
const mydata = JSON.stringify(data);
 
console.log(mydata);
let elems_autocomplete = document.querySelectorAll('.autocomplete');
let instances = M.Autocomplete.init(elems_autocomplete, autocomplete_options = {
    data: mydata
});
}
myfuncion();

En el console.log funciona!, y el autocomplete me muestra símbolos raros, supongo que es porque me trae todos los campos de un único registro (lo cual se lo indico en la consulta SQL) y solo necesito el id.
Supongo ya estoy mas cerca. 😀
 
const myfuncion = async () => {
const req = await fetch ("fetch.php" , {
header: "Content-type: application/json; charset=utf-8" ,
})
const data = await req. json();
let mydata = JSON. stringify (data);
let elems_autocomplete = document. querySelectorAll ( '.autocomplete' );
let options = { data : mydata };
let instances = M.Autocomplete. init(elems_autocomplete, options);
}
myfuncion ();
 
podrias poner aqui un ejemplo de los datos que recibes por fetch
 
J0ss dijo:
podrias poner aqui un ejemplo de los datos que recibes por fetch
Hacer clic para expandir...
Devuelve un registro de una BD con datos de una empresa (Nombre, dirección, teléfono, ciudad).

Ya casi lo tengo:
JavaScript: 
const myfuncion = async () => {
const req = await fetch("/obtener-ci", {
    header: "Content-type: application/json; charset=utf-8",
})
const data = await req.json();
const mydata = JSON.stringify(data[0].nombre);
 
console.log(mydata);
let elems_autocomplete = document.querySelectorAll('.autocomplete');
let instances = M.Autocomplete.init(elems_autocomplete, autocomplete_options = {
  data: {
     "Test": mydata,
  },
});
}
            
myfuncion();

Cuando escribo "Test" en el autocomplete me sale correctamente el nombre de la empresa al registro que corresponde.
Ahora no hay problema porque solo necesito un registro (lo que comenté que le indicaba en la consulta SQL), ¿pero como tendría que hacer si necesito completar, por ejemplo "Test 1" y "Test 2"?
Se me ocurre un foreach pero no entiendo como podría hacerlo en este caso.
 
Ya funcionó!, lo último era un error de sintaxis no mas!.
Muchas gracias :-D
 
Llego tarde, pero ya me di cuenta de la calidad de muchos de los programadores del FORO, no lo digo por el que abrio el tema si no por muchos que intentaron ayudarlo adivinando y no pensando y resolviendo el problema.
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba