Comment créer un tableau multidimensionnel avec .each de JQuery()

Question

Je voudrais créer le tableau suivant avec Jquery et une fonction .each:

Je voudrais que le JSON ressemble ceci:

{ 
      "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 est l'identifiant (c.-à-amount_14794) amount est le val() de cette entrée.

Veuillez noter que calendar_id apparaît une fois au début du tableau.

Answer 1

Vous avez besoin d'un tableau vide puis pousser un objet que vous créez en utilisant chaque

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">

si vous voulez que les autres propriétés que vous pouvez créer un objet avec eux d'abord, puis ajouter à la vide dishs propriété les nouveaux objets

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

est un code ci-dessous exemple de ce que vous recherchez:

$("#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

Il peut se faire comme suit:

$(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">