CODEWITHSUNDEEP
javascriptjqueryarrays
ProEvilz
ProEvilz

Reputation: 5455

How can I store multiple sets of input values in JS?

Consider the following pairs of inputs

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

The number of pairs of inputs on a page is dynamic, not fixed.

I wish to loop through all pairs and store values as pairs to be output later into a table for example.

I've been trying to do it with jQuery's each() but I can't figure it out fully.

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

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

  console.log(detail);

This outputs

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

And it's not what I need.

I'm used to PHP, so what is the correct approach in JS/jQuery to store the pairs of inputs as a multidimensional associative array/object?

Upvotes: 1

Views: 5096

Answers (5)

Tran Manh Quy
Tran Manh Quy

Reputation: 1

You can try a quick and "dirty" solution:

Ref: for each input type get value with javascript

You were on the right track with .getElementById, but you want instead, .getElementsByName.

var els = document.getElementsByName("filter[]");

for (var i = 0; i < els.length; i++)
  alert(els[i].value);
<input id="filter_15" type="checkbox" name="filter[]" value="15">
<input id="filter_16" type="checkbox" name="filter[]" value="16">
<input id="filter_17" type="checkbox" name="filter[]" value="17">

Or, follow this: jQuery .each() with input elements

To extract number : 

var arrNumber = new Array();
$('input[type=number]').each(function(){
    arrNumber.push($(this).val());
})

To extract text: 

var arrText= new Array();
$('input[type=text]').each(function(){
    arrText.push($(this).val());
})

Edit : .map implementation

var arrText= $('input[type=text]').map(function(){
    return this.value;
}).get();

Upvotes: -1

dpix
dpix

Reputation: 3103

The equivalent of an associative array in javascript is an object (both act as a dictionary)

The problem you have is that your html describes a key and a value as inputs in a flat list, so when you enumerate them with your JQuery .each() you get them back all in one list.

[key, value, key, value]

what you most likely want is an object like:

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

Then you can get at say the 'macbook' property like so

obj.macbook or obj['macbook']

You can achieve this by either looping through the list two at a time and adding them to the object, or by restructing your html to have both the key and value inputs inside another element e.g.

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

Then you can do something like this:

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

Upvotes: 1

guest271314
guest271314

Reputation: 1

You can use recursion, Array.prototype.slice() to slice two <input> elements at each function call, populate an object with key, value pairs until <input> elemnents .length is reached

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

Upvotes: 0

guradio
guradio

Reputation: 15555

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

Use .map()

Upvotes: 0

castletheperson
castletheperson

Reputation: 33486

You can iterate over the elements with class item_name and create an array of objects that each have a name and qty property.

You can create this array more easily using jQuery's .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">

Upvotes: 3

Related Questions