собрать данные из DIV в JSON

191

28 августа 2021, 04:10

Есть динамически сформированная корзина заказа (условно):

<div class="bin" id="bin">
 <div class="bin_item"> <!-- первый товар заказа -->
  <div class="type">...</div>
  <div class="count">...</div>
  <div class="total_price">...</div>
 </div>
 <div class="bin_item"> <!-- второй товар заказа -->
  <div class="type">наименование_товар_1</div>
  <div class="count">количество_товар_1</div>
  <div class="total_price">цена_товар_1</div>
 </div>
 <div class="bin_item"> <!-- третий товар заказа -->
  <div class="type">...</div>
  <div class="count">...</div>
  <div class="total_price">...</div>
 </div>
</div>

Количество, тип и цена этих товаров заранее неизвестны. Подскажите, как собрать все это в JSON для последующей передачи на email.

Предположение: подсчитать количество дочерних элементов .bin_item: $(".bin_item").length, а затем обращаться к каждому .bin_item[] и собирать информацию о значениях в по заранее известным class'ам тупо пихать в JSON-строку:

{товар:наименование_товар_1, количество:количество_товар_1, цена:цена_товар_1 },
{товар:наименование_товар_2, количество:количество_товар_2, цена:цена_товар_2 }, 
{товар:наименование_товар_3, количество:количество_товар_3, цена:цена_товар_3 }

Вопрос: как получить данные из .bin_item[1], а затем .bin_item[1].type ?

Или, очень может быть, есть другой способ решения этой задачи - пока я для себя определил только такой ...

Answer 1

Просто пробегаемся в цикле по всем bin_item. Так же не называйте классы с точкой иначе не сможете потом использовать в селекторе.

var data = []; 
 
$('.bin_item').each(function() { 
  $el = $(this); 
  data.push({ 
    type: $el.find('.type').text(), 
    count: $el.find('.count').text(), 
    total_price: $el.find('.total_price').text(), 
  }) 
}); 
 
console.log(data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="bin" id="bin"> 
 <div class="bin_item"> <!-- первый товар заказа --> 
  <div class="type">...</div> 
  <div class="count">...</div> 
  <div class="total_price">...</div> 
 </div> 
 <div class="bin_item"> <!-- второй товар заказа --> 
  <div class="type">наименование_товар_1</div> 
  <div class="count">количество_товар_1</div> 
  <div class="total_price">цена_товар_1</div> 
 </div> 
 <div class="bin_item"> <!-- третий товар заказа --> 
  <div class="type">...</div> 
  <div class="count">...</div> 
  <div class="total_price">...</div> 
 </div> 
</div>