I want to print properties of an object like Nord, Est, Ouest... as elements in HTML like label: value which label is the name of direction and value its real value if exist!
But sometimes some properties don't exist (i.e. they are null), so I want to render them only if they exist!
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>I've done this BUT it's too verbose? Any suggestion to make it short is much appreciated.
you can do something like this
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>