Найдите несколько входных данных в каждом значении div и pu sh в некотором формате

Question

Я хочу получить значение из ввода в каждом div в некотором формате примерно так

[
 {"room_type_name":"Room1","room_number":10,"avg_price":"1000"},
 {"room_type_name":"Room2","room_number":20,"avg_price":"2000"}
]

Это мой HTML

<div class="clone_item"> // first Div
  <input class="form-control" name="room_type_name[0]" type="text" value="Room1">                               
  <input class="form-control" name="room_number[0]" type="number" value="10">
  <input class="form-control" name="avg_price[0]" type="number" value="1000"
</div>

<div class="clone_item"> // second Div
  <input class="form-control" name="room_type_name[1]" type="text" value="Room2">                                
  <input class="form-control" name="room_number[1]" type="number" value="20">
  <input class="form-control" name="avg_price[1]" type="number" value="2000">
</div>

, а это мой javascript

var room_array = [];
var i = 0;
var temp_obj = {};
var len =  $(".clone_item :input").length;
$(".clone_item :input").each(function(e){
        var index = this.name.split('[').pop().split(']')[0]; // get number from xxxx[0]
        var name = this.name.split('[')[0];

        temp_obj[name] =  this.value;

        if(i == index || e === (len - 1)) {
            temp_obj[name] =  this.value;
            room_array.push(temp_obj);
            temp_obj = [];
            i++;
        }
    });

проблема в том, что $ (". Clone_item: input") запускается 6 раз. Есть ли лучший способ использовать $ (". Clone_item: input"). Each?

Answer 1

Простая реализация - перебрать clone_itme и использовать .find() для получения <input> s и присвоить их значения / атрибут temp_obj, а затем pu sh это room_array

var room_array = [];


$(".clone_item").each(function(i, item) {
  var temp_obj = {};
  $(item).find('input').each(function(j, input){
    temp_obj[input.name.replace(/\[\d\]/, '')] = input.value;
  });
  room_array.push(temp_obj);
});

console.log(room_array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="clone_item"> // first Div
  <input class="form-control" name="room_type_name[0]" type="text" value="Room1" />                               
  <input class="form-control" name="room_number[0]" type="number" value="10" />
  <input class="form-control" name="avg_price[0]" type="number" value="1000" />
</div>

<div class="clone_item"> // second Div
  <input class="form-control" name="room_type_name[1]" type="text" value="Room2">                                
  <input class="form-control" name="room_number[1]" type="number" value="20">
  <input class="form-control" name="avg_price[1]" type="number" value="2000">
</div>

Answer 2

Вы можете l oop через clone_item вместо цикла по входам , затем использовать .find() входы с name^ селектором .. ^ означает, что начинается с

var Items_array = [];
$(".clone_item").each(function(e){
    var This = $(this),
        Room_type_name_val = This.find("[name^='room_type_name']").val(),
        Room_number_val = This.find("[name^='room_number']").val(),
        Room_avg_price_val = This.find("[name^='avg_price']").val();
     var obj = {
        "room_type_name" : Room_type_name_val,
        "room_number" : Room_number_val,
        "avg_price" : Room_avg_price_val
     }
     Items_array.push(obj);
});

console.log(Items_array);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="clone_item">
  <input class="form-control" name="room_type_name[0]" type="text" value="Room1">                               
  <input class="form-control" name="room_number[0]" type="number" value="10">
  <input class="form-control" name="avg_price[0]" type="number" value="1000"
</div>

<div class="clone_item">
  <input class="form-control" name="room_type_name[1]" type="text" value="Room2">                                
  <input class="form-control" name="room_number[1]" type="number" value="20">
  <input class="form-control" name="avg_price[1]" type="number" value="2000">
</div>