Conditionally display data in HTML with conditions

June 4, 2022

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.

>Solution :

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