filter по массиву созданному с помощью Array.from или

Question

Изучаю JS недавно. Помогите решить следующую задачу:

Есть NodeList из которого нужно вытащить ID и их VALUE. Нужно получить 3 массива (по ID) из которых можно будет вытащить VALUE

ID выглядят так:

visota_proema_custom_порядковый номер  
shirina_proema_custom_порядковый номер  
kolich_proema_custom_порядковый номер

Пытался так

let customProem = Array.from (document.querySelectorAll('[id*="_proema_custom"]'));
 

  let result = customProem.filter(function(val){
   return val == visota_proema_custom1;

    
  })
  console.log (customProem);
  console.log (result);

<div class="row">
  <div id="orig_inp">
  </div>
  <div id="custom_proem_2">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom2" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom2" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom2" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
  <div id="custom_proem_1">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom1" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom1" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom1" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
</div>

Answer 1

Нужно получить 3 массива (по ID) из которых можно будет вытащить VALUE

Предложу такой вариант...

const a = document.querySelectorAll('[id*="_proema_custom"]')
const o = [...a].reduce((obj, o) => {
  const k = o.id.split(/\d+/)[0]
  obj[k] ??= []
  obj[k].push(+o.value)
  return obj
}, {})
console.log(o)

<div class="row">
  <div id="orig_inp">
  </div>
  <div id="custom_proem_2">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom2" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom2" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom2" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
  <div id="custom_proem_1">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom1" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom1" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom1" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
</div>

Answer 2

Для того, что бы получить значения из input, перемножить их по группам и потом получить результат, можно сделать следующим образом:

Получаем блоки с input, далее каждый блок обрабатываем отдельно и перемножаем значения, после выводим итоговое значение.

Если промежуточные значения надо сохранять для дальнейшей обработки, то их можно поместить в массив

const result = document.getElementById('res'); // результирующий блок
document.getElementById('calc').addEventListener('click', calc); // Кнопка для рассчета
const blocks = document.querySelectorAll('[id*="custom_proem"]'); // блоки с данными

function calc() {
  result.innerHTML = ''; // Зачищаем предыдущий результат
  let itog = 0;
  //const resArray = [];
  blocks.forEach(block => { // Для каждого блока
    let resCalc = 0
    block.querySelectorAll('input').forEach(item => { // Считаем произведение
      resCalc = resCalc ? resCalc * +item.value : +item.value;
    });
    itog += resCalc; // Добавляем к общему ИТОГО
    //resArray.push(resCalc);
    // Добавляем текст в блок результата
    const p = document.createElement('p');
    p.innerText = `${block.id}: ${resCalc}`;
    result.appendChild(p);
  })
  // Добавляем Итого
  const p = document.createElement('p');
  p.innerText = `Суммарно: ${itog}`;
  result.appendChild(p);
}

<div class="row">
  <div id="orig_inp">
  </div>
  <div id="custom_proem_2">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom2" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom2" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom2" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
  <div id="custom_proem_1">
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Высота проема, м</span>
        <input id="visota_proema_custom1" value="1.6" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Ширина проема, м</span>
        <input id="shirina_proema_custom1" value="1.8" type="number" class="form-control">
      </div>
    </div>
    <div>
      <div class="input-group m-3">
        <span class="input-group-text">Количество, шт</span>
        <input id="kolich_proema_custom1" value="3" type="number" class="form-control">
      </div>
    </div>
  </div>
</div>
<button id="calc">Расчитать</button>
<div id="res"></div>

БЛОГ НА HUSL

filter по массиву созданному с помощью Array.from или

Ответы (2 шт):