Как при отрисовке разметки по клику вывести только те значения объекта, которые больше 0?

Question

[Andy Koshman]

Всем привет, есть данный код в котором по клику реализуется добавление html разметки на страницу. Данные представлены в виде объекта и по своему шаблону формируются в интерполяции. Как реализовать функционал, который позволяет не выводить значения объекта которые == 0? В данном случае, этот кусок разметки:

<div>Младенец: </div> <span>${el.countThreeTxt}: ${el.countThree}</span>

в первом квадрате и

<div>Подросток: </div> <span>${el.countTwoTxt}: ${el.countTwo}</span>

во втором не должны выводиться потому что значения в объектах countTwo == 0, countThree == 0.

https://jsfiddle.net/enbrytd3/

let info = document.querySelector('.info')
let button = document.querySelector('.button')

let arr = [{
    countOne: 1,
    countOneTxt: 'Колличество взрослых',
    countTwo: 2,
    countTwoTxt: 'Колличество подростков',
    countThree: 0,
    countThreeTxt: 'Колличество детей',
  },
  {
    countOne: 1,
    countOneTxt: 'Колличество взрослых',
    countTwo: 0,
    countTwoTxt: 'Колличество подростков',
    countThree: 1,
    countThreeTxt: 'Колличество детей',
  },
]
button.addEventListener('click', function() {

  const render = (x = arr) => {
    [...x].forEach((el) => {
      info.insertAdjacentHTML(
        "beforeend",
        `<div class="item">
	<div>Взрослый: </div>
       <span>${el.countOneTxt}: ${el.countOne}</span><br>
       <hr>
       <div>Подросток: </div>
       <span>${el.countTwoTxt}: ${el.countTwo}</span><br>
        <hr>
     	<div>Младенец: </div>
       <span>${el.countThreeTxt}: ${el.countThree}</span> 
       <hr>
  	</div>`)
    })
  }
  render()
})

Answer 1

[v3shin]

Я бы разнес нужные элементы по разным переменным. Примерно:

let elСountTwo = el.countTwo ? `${el.countTwoTxt}: ${el.countTwo}` : '',
    elСountThree = el.countThree? `${el.countThreeTxt}: ${el.countThree}` : '';

И потом бы в шаблоне выводил:

`<div class="item">${elСountTwo} ${elСountThree}</div>`

Comments

[Andy Koshman]

Спасибо большое, очень лаконично и всё работает.