Задать вопрос
Chupachar
@Chupachar
front-end dev

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

Всем привет, есть данный код в котором по клику реализуется добавление 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()
})
  • Вопрос задан
  • 64 просмотра
Подписаться 1 Средний Комментировать
Решения вопроса 1
v3shin
@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>`
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы