L oop добавить данные в массив, и данные будут перезаписаны

Question

Я пытаюсь l oop добавить данные в массив, но данные с ключом перезаписываются.

var minmax_array = [];

$(".room_minmax_div").each(function(index, data) {
  var room = $(this).data('room');
  minmax_array[room] = [];

});

$(".room_minmax_div input").each(function(index, data) {
  //get date
  var room = $(this).data('room');
  var name = $(this).attr('name');
  var value = $(this).val();

  if (value == '') {
    value = 0;
  }

  var obj = {};
  //Obj
  obj[name] = value;
  minmax_array[room] = obj;

});

minmax_json = minmax_array;
console.log(minmax_json);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="minmax-field">
  <div class="mt-2 room_minmax_div" data-room="Room1">
    <h6 class="text-left"> Room Type : Room1</h6>
    <div class="row form-group">
      <div class="col-md-2 m-3 text-left">
        <div>Min</div>
        <input class="form-control" data-room="Room1" name="min" type="number" value="10">
        <div>Max</div>
        <input class="form-control" data-room="Room1" name="max" type="number" value="14">
      </div>
    </div>
  </div>
  <div class="mt-2 room_minmax_div" data-room="Room2">
    <h6 class="text-left"> Room Type : Room2</h6>
    <div class="row form-group">
      <div class="col-md-2 m-3 text-left">
        <div>Min</div>
        <input class="form-control" data-room="Room2" name="min" type="number" value="5">
        <div>Max</div>
        <input class="form-control" data-room="Room2" name="max" type="number" value="7">
      </div>
    </div>
  </div>
  <div class="mt-2 room_minmax_div" data-room="Room3">
    <h6 class="text-left"> Room Type : Room3</h6>
    <div class="row form-group">
      <div class="col-md-2 m-3 text-left">
        <div>Min</div>
        <input class="form-control" data-room="Room3" name="min" type="number" value="9">
        <div>Max</div>
        <input class="form-control" data-room="Room3" name="max" type="number" value="10">
      </div>
    </div>
  </div>
</div>

Результат моего кода следующий:

[
  Room1: [ max : 14 ],
  Room2: [ max : 7],
  Room3: [ max : 10]
]

Я хочу, чтобы результат был таким:

[
  Room1: [ min : 10 , max : 14 ],
  Room2: [ min : 5, max : 7],
  Room3: [ min : 9, max : 10]
]

https://jsfiddle.net/chanthida/zc39pkbw/3/

Answer 1

Прежде всего, вам нужно создать объект JSON вместо массива. Таким образом, инициализация переменных и полей 1-го уровня должна выполняться следующим образом.

var minmax_array = {};

$(".room_minmax_div").each(function(index, data) {
  var room = $(this).data('room');
  minmax_array[room] = {};
});

Затем, когда вы обновляете объект второго уровня с помощью значения max или min, вы должны проверить, есть ли уже является объектом, назначенным этому ключу. Если да, вам следует обновить этот объект вместо того, чтобы назначать совершенно новый.

$(".room_minmax_div input").each(function(index, data) {
  //get date
  var room = $(this).data('room');
  var name = $(this).attr('name');
  var value = $(this).val();

  if(value == ''){
    value = 0;
  }

  // If there is a value for minmax_array[room], use it as obj. Otherwise create an empty object
  var obj = minmax_array[room] || {};
  //Obj
  obj[name] = value;
  minmax_array[room] = obj;

});

Тогда ваш результат будет примерно таким, как показано ниже.

{
  Room1: {
    max: "14",
    min: "10"
  },
  Room2: {
    max: "7",
    min: "5"
  },
  Room3: {
    max: "10",
    min: "9"
  }
}