Tengo algunos campos que quiero ocultar si son nulos. Puedo hacer esto con:
if (json[0].incendio_edificio == null) { $("#dIncendio_edificio").parent().parent().hide(); } if (json[0].hvct_edificio == null) { $("#dHvct_edificio").parent().parent().hide(); } if (json[0].granizo_edificio == null) { $("#dGranizo_edificio").parent().parent().hide(); }Lo que quiero hacer es poner los campos dentro de una matriz y hacer el condicional dentro de un bucle, así:
const campos_poliza = [ [json[0].incendio_edificio, $("#dIncendio_edificio")], [json[0].hvct_edificio, $("#dHvct_edificio")], [json[0].granizo_edificio, $("#dGranizo_edificio")], ]; for (var x in campos_poliza){ if (x[0] == null) { x[1].parent().parent().hide(); } }Esto no da ningún error, pero sigue mostrando campos nulos. ¿Cómo puedo conseguir esto? el html es:
<div class="row"> <div class="col s3"> <span class="text-bold text-blue">Incendio Edificio:</span> </div> <div class="col s9"> <span id="dIncendio_edificio"></span> </div> </div> <div class="row"> <div class="col s3"> <span class="text-bold text-blue">HVCT Edificio:</span> </div> <div class="col s9"> <span id="dHvct_edificio"></span> </div> </div> <div class="row"> <div class="col s3"> <span class="text-bold text-blue">Granizo Edificio:</span> </div> <div class="col s9"> <span id="dGranizo_edificio"></span> </div> </div>Cuando usas for (var x in campos_poliza) , x es el índice de la matriz, que es 0, 1, 2...
Esto podría ser lo que necesitas:
for (var x of campos_poliza) { if (x[0] == null) { x[1].parent().parent().hide(); } }O
campos_poliza.forEach(x => { if (x[0] == null) { x[1].parent().parent().hide(); } });¿Por qué no alternar si existe?
const obj = [{ incendio_edificio:null, hvct_edificio : "not null", granizo_edificio : null }] Object.entries(obj[0]).forEach(([key,val]) => { const sel = `#d${key.slice(0,1).toUpperCase()}${key.slice(1)}`; console.log(key,val,sel) const $elem = $(sel) if ($elem) $elem.closest(".row").toggle(val!=null) }) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="row"> <div class="col s3"> <span class="text-bold text-blue">Incendio Edificio:</span> </div> <div class="col s9"> <span id="dIncendio_edificio"></span> </div> </div> <div class="row"> <div class="col s3"> <span class="text-bold text-blue">HVCT Edificio:</span> </div> <div class="col s9"> <span id="dHvct_edificio"></span> </div> </div> <div class="row"> <div class="col s3"> <span class="text-bold text-blue">Granizo Edificio:</span> </div> <div class="col s9"> <span id="dGranizo_edificio"></span> </div> </div>