如何使用 JQuery -with .each() 创建多维数组

Question

我想用 Jquery 和一个 .each 函数创建以下数组：

我希望 JSON 看起来像 这个：

{
            "calendar_id": "1",
            "dishs": [
                 {
                    "dish_id": "11111",
                    "amount": "234234"
                },
                 {
                    "dish_id": "11112",
                    "amount": "234234"
                },
                 {
                    "dish_id": "11113",
                    "amount": "234234"
                }, ...]
}

HTML

<input type="number" class="amount" id="amount_14793">
<input type="number" class="amount" id="amount_14794">
<input type="number" class="amount" id="amount_14795">

dish_id是id（即amount_14794） amount 是该输入的 val()。

请注意 calendar_id 在数组的开头出现一次。

Answer 1

您需要一个空数组，然后推送您使用每个构建的对象

var obj = [];
$('.amount').each(function(i,v){
    obj.push({'dish_id':$(v).attr('id'),'amount': $(v).val()});
});
console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="amount" id="amount_14793" value="1">
<input type="number" class="amount" id="amount_14794" value="2">
<input type="number" class="amount" id="amount_14795" value="3">

如果你想要其他属性，你可以先用它们创建一个对象，然后附加到空 dishs 属性新对象

var obj = {
  "calendar_id": "1",
  "dishs": []
};
$('.amount').each(function(i, v) {
  obj.dishs.push({
    'dish_id': $(v).attr('id'),
    'amount': $(v).val()
  });
});
console.log(obj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" class="amount" id="amount_14793" value="1">
<input type="number" class="amount" id="amount_14794" value="2">
<input type="number" class="amount" id="amount_14795" value="3">

Answer 2

下面是您要查找的示例代码：

$("#submit").click(function(){
  var paramsToSend = {};
  var i = 1;
  var amount = ''
  $("input[name='number[]']").each(function(){
    paramsToSend['dish_id_' + i] = $(this).val();
    i++;
  });
  
   $("#dataToSend").html(JSON.stringify(paramsToSend));
   
   $.ajax({
         type: "POST",
         url: 'URL_HERE',
         data: {params:JSON.stringify(paramsToSend)},
         success: function(data) {
          console.log("SUCCESS!!!");
         }
   });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inputsl">
<input name="number[]" type="number" class="amount" id="amount_14793">
<input name="number[]" type="number" class="amount" id="amount_14794">
<input name="number[]" type="number" class="amount" id="amount_14795">
</div>
<button id="submit">
Submit
</button>

<div id="dataToSend"></div>

Answer 3

可以通过以下方式完成：

$(document).ready(function() {
  var resultObj = {};
  resultObj.calendar_id = 1;
  resultObj.dishs = [];

  $(".amount").each(function() {

    var currentDish = {};
    currentDish.dish_id = $(this).attr("id").replace("amount_", ""); //set the dish_id by grabing only number out of element id

    currentDish.amount = $(this).val(); //set the amount

    resultObj.dishs.push(currentDish);

  });

  console.log(resultObj);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type="number" value="12345" class="amount" id="amount_14793">
<input type="number" value="12345" class="amount" id="amount_14794">
<input type="number" value="12345" class="amount" id="amount_14795">

如何使用 JQuery -with .each() 创建多维数组

How to create a multidimensional array with JQuery -with .each()

each

jquery