Wie kann ich mehrere Sätze von Eingabewerten in JS speichern?

Question

Betrachten wir die folgenden Paare von Eingängen

<input type="text" class="item_name" value="iphone"> 
<input type="text" class="item_qty" value="10"> 

<input type="text" class="item_name" value="macbook"> 
<input type="text" class="item_qty" value="5"> 

Die Anzahl der Paare von Eingängen auf einer Seite ist dynamisch, nicht festgelegt.

Ich möchte alle Paare durchlaufen und Werte als Paare speichern, die später beispielsweise in einer Tabelle ausgegeben werden.

Ich habe versucht, es mit jQuery each() zu tun, aber ich kann es nicht vollständig herausfinden.

var detail = []; 
    //var detail = {}; 

    $('input').each(function(index) { 
     detail[index] = $(this).val(); 
     //detail.index = $(this).val(); 
    }); 

    console.log(detail); 

Diese gibt

["iphone", "10", "macbook", "5"] 

Und es ist nicht das, was ich brauche.

Ich bin an PHP gewöhnt, also was ist der richtige Ansatz in JS/jQuery, um die Paare von Eingängen als multidimensionales assoziatives Array/Objekt zu speichern?

Answer 1

Sie können über die Elemente mit der Klasse item_name iterieren und ein Array von Objekten erstellen, die jeweils eine name- und qty-Eigenschaft aufweisen.

Sie können dieses Array erstellen mehr mit leicht jQuery .map():

var details = $('.item_name').map(function() { 
 
    return { 
 
    name: $(this).val(), 
 
    qty: $(this).next('.item_qty').val() 
 
    }; 
 
}).get(); 
 

 
console.log(details);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="item_name" value="iphone"> 
 
<input type="text" class="item_qty" value="10"> 
 

 
<input type="text" class="item_name" value="macbook"> 
 
<input type="text" class="item_qty" value="5">

Answer 2

var val = $("input.item_name").map(function(){ 
 
obj = {} 
 

 
obj[$(this).val()] = $(this).next("input.item_qty").val(); 
 

 
return obj; 
 
}).get() 
 

 
console.log(val)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="item_name" value="iphone"> 
 
<input type="text" class="item_qty" value="10"> 
 

 
<input type="text" class="item_name" value="macbook"> 
 
<input type="text" class="item_qty" value="5">

Verwenden .map()

Answer 3

Sie Rekursion verwenden können, Array.prototype.slice() schneiden zwei <input> Elemente bei jedem Funktionsaufruf, um ein Objekt mit Schlüssel, Wert-Paare, bis <input> elemnents .length bevölkern ist

var [obj, n] = [{}, 2]; 
 
var inputs = $("input[type=text]"); 
 
var res = (function re(i) { 
 
    if (i + n <= inputs.length) { 
 
    var [key, prop] = Array.from(inputs).slice(i, i + n).map(({value}) => value) 
 
    obj[key] = prop; 
 
    i += n; 
 
    return re(i) 
 
    } else { 
 
    return obj 
 
    } 
 
})(0); 
 
console.log(res)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="item_name" value="iphone"> 
 
<input type="text" class="item_qty" value="10"> 
 

 
<input type="text" class="item_name" value="macbook"> 
 
<input type="text" class="item_qty" value="5">

Answer 4

das Äquivalent eines assoziativen erreicht Array in Javascript ist ein Objekt (beide fungieren als ein Wörterbuch)

Das Problem, das Sie haben, ist, dass Ihr HTML einen Schlüssel und einen Wert als Eingaben in einer flachen Liste beschreibt, also wenn y ou enumerieren Sie sie mit Ihrer JQuery .each() Sie erhalten sie alle in einer Liste zurück.

[key, value, key, value]

was Sie wahrscheinlich wollen, ist ein Objekt wie:

var obj = { 
    key: value, 
    key: value 
} 

Dann können Sie erhalten sagen die 'macbook' Eigenschaft wie so

obj.macbook oder obj['macbook']

Sie können dies erreichen, indem Sie entweder die Liste zwei nacheinander durchlaufen und sie dem Objekt hinzufügen, oder indem Sie Ihr HTML so umstrukturieren, dass sowohl die Schlüssel- als auch die Werteingabe in einem anderen Element, z.

<div class="item"> 
<input type="text" class="item_name" value="iphone"> 
<input type="text" class="item_qty" value="10"> 
</div> 
<div class="item"> 
<input type="text" class="item_name" value="macbook"> 
<input type="text" class="item_qty" value="5"> 
</div> 

Dann können Sie etwas tun:

var items = {} 
$('.item').each(function(){ 
var key = $(this).find('.item_name').val() 
var value = $(this).find('.item_qty').val() 
items[key] = value; 
})