Quiero imprimir propiedades de un objeto como Nord, Est, Ouest... como elementos en HTML como etiqueta: valore qué etiqueta es el nombre de la dirección y valore su valor real si existe. Pero a veces algunas propiedades no existen (es decir, son null ), ¡así que quiero representarlas solo si existen!
function print_directions(dirs) { let { nord, nordest, nordouest, est, sud, sudest, sudouest, ouest } = dirs; document.querySelector(".content").innerHTML = ` <div class="info-dir ${nord == null ? "d-none" : ""}"> Nord: <span>${nord ?? ""}</span> </div> <div class="info-dir ${nordest == null ? "d-none" : ""}"> nord-est: <span>${nordest ?? ""}</span> </div> <div class="info-dir ${nordouest == null ? "d-none" : ""}"> nord-ouest: <span>${nordouest ?? ""}</span> </div> <div class="info-dir ${est == null ? "d-none" : ""}"> Est: <span>${est ?? ""}</span> </div> <div class="info-dir ${sud == null ? "d-none" : ""}"> Sud: <span>${sud ?? ""}</span> </div> <div class="info-dir ${sudest == null ? "d-none" : ""}"> Sud-est: <span>${sudest ?? ""}</span> </div> <div class="info-dir ${sudouest == null ? "d-none" : ""}"> Sud-ouest: <span>${sudouest ?? ""}</span> </div> <div class="info-dir ${ouest == null ? "d-none" : ""}"> Ouest: <span>${ouest ?? ""}</span> </div>`; } let dirs = { nord: 10, est: 19, sudouest: 5 }; print_directions(dirs); .d-none { display: none; } <div class="content"></div>¿He hecho esto PERO es demasiado detallado? Cualquier sugerencia para hacerlo breve es muy apreciada.
puedes hacer algo como esto
function print_directions(dirs) { const translations = { nord: 'Nord', sud: 'Sud', ouest: 'Ouest', est: 'Est', sudouest: 'Sud-ouest', sudest: 'Sud-est', nordouest: 'Nord-ouest', nordest: 'Nord-est' } const html = Object.entries(dirs).map(([dir, value]) => `<div class="info-dir"> ${translations[dir] || dir}: <span>${value}</span> </div>`).join('') document.querySelector(".content").innerHTML = html; } let dirs = { nord: 10, est: 19, sudouest: 5 }; print_directions(dirs); .d-none { display: none; } <div class="content"></div>