循环添加数据到数组，数据被覆盖

Question

我正在尝试循环将数据添加到数组，但带有键的数据被覆盖。

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>

Answer 1

首先，您需要创建一个 JSON 对象，而不是一个数组。因此，变量和第一级字段的初始化应按如下方式进行。var minmax_array = {};$(".room_minmax_div").each(function(index, data) {&nbsp; var room = $(this).data('room');&nbsp; minmax_array[room] = {};});max然后，当您使用或值更新二级对象时min，您应该检查是否已经有一个对象分配给该键。如果是，您应该更新该对象而不是分配一个全新的对象。$(".room_minmax_div input").each(function(index, data) {&nbsp; //get date&nbsp; var room = $(this).data('room');&nbsp; var name = $(this).attr('name');&nbsp; var value = $(this).val();&nbsp; if(value == ''){&nbsp; &nbsp; value = 0;&nbsp; }&nbsp; // If there is a value for minmax_array[room], use it as obj. Otherwise create an empty object&nbsp; var obj = minmax_array[room] || {};&nbsp; //Obj&nbsp; obj[name] = value;&nbsp; minmax_array[room] = obj;});然后你的输出将类似于下面的内容。{&nbsp; Room1: {&nbsp; &nbsp; max: "14",&nbsp; &nbsp; min: "10"&nbsp; },&nbsp; Room2: {&nbsp; &nbsp; max: "7",&nbsp; &nbsp; min: "5"&nbsp; },&nbsp; Room3: {&nbsp; &nbsp; max: "10",&nbsp; &nbsp; min: "9"&nbsp; }}