¿Puede un JSON complicarme tanto?

uncoderbyte · 9 Ene 2021

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.

J0ss · 9 Ene 2021

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

uncoderbyte · 9 Ene 2021

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

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
});

uncoderbyte · 9 Ene 2021

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

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.

J0ss · 9 Ene 2021

J0ss · 9 Ene 2021

podrias poner aqui un ejemplo de los datos que recibes por fetch

uncoderbyte · 9 Ene 2021

J0ss dijo:
podrias poner aqui un ejemplo de los datos que recibes por fetch

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.

uncoderbyte · 9 Ene 2021

Ya funcionó!, lo último era un error de sintaxis no mas!.
Muchas gracias :-D

Christianabreuh · 9 Ene 2021

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.