0

Всем привет, есть данный код в котором по клику реализуется добавление html разметки на страницу. Данные представлены в виде объекта и по своему шаблону формируются в интерполяции. Как реализовать функционал, который позволяет не выводить значения объекта которые == 0? В данном случае, этот кусок разметки <div>Младенец: </div> <span>${el.countThreeTxt}: ${el.countThree}</span> не должен выводиться потому что countThree == 0.

https://jsfiddle.net/kwmrsx2z/13/

<button class="button-one">click</button>
<div class="info"></div>

let info = document.querySelector('.info')
let buttonOne = document.querySelector('.button-one')

let arr = [{
    countOne: 1,
    countOneTxt: 'Количество взрослых',
    countTwo: 2,
    countTwoTxt: 'Количество подростков',
    countThree: 0,
    countThreeTxt: 'Количество детей',
  },
  {
    countOne: 1,
    countOneTxt: 'Количество взрослых',
    countTwo: 0,
    countTwoTxt: 'Количество подростков',
    countThree: 1,
    countThreeTxt: 'Количество детей',
  },
]
buttonOne.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()
})
0

1 ответ 1

0

Это возможно реализовать, но это будет лишнее усложнение, всё из-за того что у вас подход к данным и HTML неправильный. Для примера, если у вас будет таких данных 10 000 тогда вы вручную будете вписывать все данные с массива? Каждый новый блок информации - новый объект.

Вот так:

[{
  count: 1,
  countTxt: 'Колличество взрослых',
},
{
  count: 2,
  countTxt: 'Колличество подростков',
},
{
  count: 0,
  countTxt: 'Колличество детей',
}]

И вот так в конечном итоге можно сократить ваш код (Я также добавил пропорцию header чтобы вручную не указывать верхнюю надпись):

let info = document.querySelector('.info')
let buttonOne = document.querySelector('.button-one')
let data = [
  {
    count: 1,
    countTxt: 'Колличество взрослых',
    header: 'Взрослый',
  },
  {
    count: 2,
    countTxt: 'Колличество подростков',
    header: 'Подросток',
  },
  {
    count: 0,
    countTxt: 'Колличество детей',
    header: 'Младенец',
  }
]

buttonOne.addEventListener('click', () => {
  let item = document.createElement('div')
  item.className = 'item'
  data.forEach(e => {
    let itemChild = document.createElement('div')
    itemChild.innerHTML = `
    <span>${e.header}<span>
    <span>${e.countTxt}: ${e.count}</span>
    <hr>` 
    item.appendChild(itemChild)
  })
  document.body.appendChild(item)
}, {
  once: true
})
.item {
  border: 1px solid #000;
  width: 200px;
  min-height: 116px;
  padding: 10px;
  margin-bottom: 10px;
}

.item span {
  width: 100%;
  display: block;
}
<button class="button-one">click</button>
<div class="info"></div>

Как мы видим всё выводится корректно, но теперь когда у нас есть данные в нормальном виде, мы их может легко отфильтровать используя метод filter:

let info = document.querySelector('.info')
let buttonOne = document.querySelector('.button-one')
let data = [
  {
    count: 1,
    countTxt: 'Колличество взрослых',
    header: 'Взрослый',
  },
  {
    count: 2,
    countTxt: 'Колличество подростков',
    header: 'Подросток',
  },
  {
    count: 0,
    countTxt: 'Колличество детей',
    header: 'Младенец',
  }
]

buttonOne.addEventListener('click', () => {
  let item = document.createElement('div')
  item.className = 'item'
  data
  .filter(e => e.count > 0)
  .forEach(e => {
    let itemChild = document.createElement('div')
    itemChild.innerHTML = `
    <span>${e.header}<span>
    <span>${e.countTxt}: ${e.count}</span>
    <hr>` 
    item.appendChild(itemChild)
  })
  document.body.appendChild(item)
}, {
  once: true
})
.item {
  border: 1px solid #000;
  width: 200px;
  min-height: 116px;
  padding: 10px;
  margin-bottom: 10px;
}

.item span {
  width: 100%;
  display: block;
}
<button class="button-one">click</button>
<div class="info"></div>

В конечном итоге вместо того чтобы где-то с HTML'а получать какое-то число, и затем удалять элемент если кол-во оно не валидное, теперь мы просто заранее фильтруем данные не пропуская неугодные нам данные.

Фильтрация выглядит так: data.filter(e => e.count > 0). То есть если у объекта e, пропорция count больше 0, тогда этот объект останется, в противоположном случае, нет.

P.S. В методе addEventListener я добавил аргумент 3-ий аргумент { once: true }, чтобы событие срабатывало лишь один раз.

2
  • Спасибо большое за развернутый ответ. Но по поводу массива объектов, он имеет такой вид: let arr = [ { countOne: 2, countOneTxt: 'Количество взрослых', countTwo: 1, countTwoTxt: 'Количество подростков', countThree: 2, countThreeTxt: 'Количество детей', }] по факту это заказ в корзине и один объект это один заказ с имеющимися ключами и мне нужно работать именно с данными фиксированными переменными, боюсь поделить объекты по вашему примеру у меня не получится потому что формирование массива объектов уже в данном виде. Как же можно отфильтровать данный случай? 26 окт 2022 в 16:12
  • Массив объектов по количеству переменных "ограничен и фиксирован". let arr = [{ countOne: 0, countOneTxt: 'Количество взрослых', countTwo: 2, countTwoTxt: 'Количество подростков', countThree: 0, countThreeTxt: 'Количество детей', }, { countOne: 0, countOneTxt: 'Колличество взрослых', countTwo: 1, countTwoTxt: 'Количество подростков', countThree: 2, countThreeTxt: 'Количество детей', }, ] Вот предположим 2 заказа в корзине. 26 окт 2022 в 16:22

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.