1

Tengo una variable llamada "rela" la cual trae datos de una consulta si hay una coincidencia con la tabla de la base de datos(esto ya lo he probado y funciona). Esto lo hago en un fetch() o promesa, ahora quiero cambiar el código que tengo ya que tengo pensado en una condicional consultar si la variable es NULL.

Esto es lo que tengo

fetch('prdSimilares.php',{
            method: 'POST',
            body: data
         })
         .then(res =>  res.json())
         .then(dataS => {
            let rela = JSON.parse(JSON.stringify(dataS));
            let html = ' ';      
            for (let i = 0; i < rela.length; i++) {            
               html += `<div class="item">
                           <img class="img-trj-prodRela" src="${rela[i].foto}" alt="${rela[i].nombre}" id="${rela[i].categoria},${rela[i].subcategoria},${rela[i].nombre},${rela[i].codigo},${rela[i].id_cat}" onclick="javascript: clave()">                                                      
                        </div>`;
            }
            ...
            ...
         });

lo que he intentado: primeramente comenté lo del bucle for e hice un console.log(typeof rela) obtengo que rela es un objeto, luego realicéconsole.log(rela) para ver que se obtenía y la respuesta fue un [null]; ya con esto intenté poner un

if (rela === null){
   console.log('vacio');
   //ocultar contenedor
} else {
   for (let i = 0; i < rela.length; i++) { 
   ...
   ...
   }
}

Pero no se me mostró en consola el mensaje de "vacio" e hizo el código del bucle for, también intente usando el operador == y de igual forma no se mostro el mensaje y se realizo el bucle.

No le quiero dejar sin esta condicional ya que en consola quedaría el error de esta parte. ¿ De qué manera puedo consultar si la variable es nula?

1
  • Por lo que indicas rela es un array que trae [null] para validar deberías colocar en el if(rela[0] === null) Commented el 8 jul. 2022 a las 5:53

4 respuestas 4

0

No se, ya que no se lo que llega del fetch, estaría bien ver un ejemplo de la respuesta.

De todas maneras puedes hacer esto, si la variable es null nunca entraría dentro del bucle:

rela?.forEach(x => {
        html += `<div class="item">
                       <img class="img-trj-prodRela" src="${x.foto}" alt="${x.nombre}" id="${x.categoria},${x.subcategoria},${x.nombre},${x.codigo},${x.id_cat}" onclick="javascript: clave()">
                       <div class="nombre_producto">
                          <h2 id="${x.categoria},${x.subcategoria},${x.nombre},${x.codigo},${x.id_cat}" onclick="javascript: clave()">${x.nombre}</h2>
                       </div>                           
                    </div>`;
        }
        document.getElementById('relacionados').innerHTML = html;
})
0

Como previamente había hecho la consulta relacionada al tipo de dato (typeof) y como me decía también en consola que tenía un length de 1 intuí que es un arreglo a pesar de que no fue declarada como tal, por lo tanto la condicional que realice es: `` if (rela[rela.length - 1] == null) { console.log("vacio"); ... } else { for(let i = 0; i < rela.length; i++){ html += .....; } }

0

Primero, te recomiendo una optimización, porque no tiene caso interpretar la respuesta del servidor como JSON con res => res.json() para después convertir en cadena y volver a interpretar con let rela = JSON.parse(JSON.stringify(dataS));, solo estás complicando la lógica y dando más trabajo del necesario al navegador.

De acuerdo a la respuesta que obtienes en la consola [null], se trata de un arreglo con un solo elemento nulo.

fetch('prdSimilares.php',{
    method: 'POST',
    body: data
})
// Aquí ya estás interpretando la respuesta como JSON
.then(res =>  res.json())
// Usa directamente la variable como parámetro de la función flecha
.then(rela => {
    let html = ' ';
    // Si solo hay un elemento y es nulo, evitar entrar al ciclo
    if(rela.length == 1 && rela[0] === null) {
        // No entras al ciclo
    } else {
        // En lugar de un for, puedes simplificar con forEach
        rela.forEach(item => {
            html += `<div class="item">
                   <img class="img-trj-prodRela" src="${item.foto}" alt="${item.nombre}" id="${item.categoria},${item.subcategoria},${item.nombre},${item.codigo},${item.id_cat}" onclick="javascript: clave()">                                                      
                </div>`;
        });
});

Otros dos problemas que veo:

  1. Estás creando el atributo ID muy largo, probablemente iniciando con número y con caracteres inválidos; te sugiero usar atributos de datos para tener mejor control de los elementos
  2. En el evento onclick sobra el protocolo javascript:, ya no es necesario y, además, al ejecutar la función no estás enviando un parámetro que permita identificar dónde se originó el evento

Para el segundo punto, podrías dejar onclick="clave(event)" para poder identificar el elemento mediante event.target; de cualquier forma, siempre es mejor element.addEventListener(), aunque es un poco más complicado asignarlo, porque estás creando código HTML en lugar de elementos.

1
  • Sí, tengo que actualizar el código también, gracias por tu comentario Commented el 11 jul. 2022 a las 22:33
0

La comprobación que haces la debes hacer dentro del loop en éste caso. Lo que pasa es que la variable rela no es null porque es un Array.

let rela = dataS;
let html = ' ';

for (let i = 0; i < rela.length; i++) {
 if (rela[i] === null) {//AQUI ES DONDE NECESITAS COMPROBAR
    console.log('vacio');
 } else {
    html += `<div class="item">
                       <img class="img-trj-prodRela" src="${rela[i].foto}" alt="${rela[i].nombre}" id="${rela[i].categoria},${rela[i].subcategoria},${rela[i].nombre},${rela[i].codigo},${rela[i].id_cat}" onclick="javascript: clave()">
                       <div class="nombre_producto">
                          <h2 id="${rela[i].categoria},${rela[i].subcategoria},${rela[i].nombre},${rela[i].codigo},${rela[i].id_cat}" onclick="javascript: clave()">${rela[i].nombre}</h2>
                       </div>                           
                    </div>`;
 }
}
2
  • Yo pienso que debería comprobarla antes de hacer lo del bucle, pero gracias @Wisquimas por tu respuesta ya la voy a poner a prueba Commented el 7 jul. 2022 a las 20:43
  • Yo antes del loop haría otro tipo de comprobaciones como por ejemplo if(Array.isArray(rela)). Además ten en cuenta que tu linea donde defines rela es excesiva. En realidad rela es igual a dataS. Pero prueba y me dices
    – Wisquimas
    Commented el 7 jul. 2022 a las 20:47

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.