jQuery: Loop through elements by class and create associative array

Question

I have a variable list of elements and need to get their names and values in pairs (associative array or object).

So far I have the following but how do I create the pairs of name and value for each element ?

var names = [];
var values = [];

$('.modalField').each(function() {
    fieldName = $(this).attr('name');
    fieldVal = $(this).val();
    
    names.push(fieldName);
    values.push(fieldVal);
});

Thanks for any help,
Tom

What's wrong with your current code? You can just use name[i] and values[i] to get the name and value for any particular field... — Nick
– Nick, Commented Aug 14, 2020 at 13:08
Does this answer your question? Add a property to a JavaScript object using a variable as the name? — Heretic Monkey
– Heretic Monkey, Commented Aug 14, 2020 at 13:11
Take a look at this post this should help you stackoverflow.com/questions/19787868/… — Sahasrar
– Sahasrar, Commented Aug 14, 2020 at 13:11

I wrestled a bear once. · Accepted Answer · 2020-08-14 13:16:41Z

1

Use bracket notation.

var assoc = {};
$('.modalField').each(function() {
    let fieldName = $(this).attr('name');
    let fieldVal = $(this).val();
    assoc[fieldName] = fieldVal;
});

(Also, you should initialize your variables with let/var/const inside the function so they don't leak into the global scope.)

edited Aug 14, 2020 at 13:16

answered Aug 14, 2020 at 13:08

I wrestled a bear once.

23.5k20 gold badges74 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Heretic Monkey Over a year ago

...Certainly this subject has come up before?

keewee279 Over a year ago

@HereticMonkey: I would assume so but couldn't it through the search.

keewee279 Over a year ago

This is perfect - thanks a lot ! Regarding the var initialisation, I have done that inside the function, just left it out here.

Shadab · Accepted Answer · 2020-08-14 13:10:51Z

0

Something like this?

var fields = [];

$('.modalField').each(function() {
    var name = $(this).attr('name');
    var value = $(this).val();
    
    fields.push({ name, value });
});

console.log(fields);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input class="modalField" name="n1" value="v1" />
  <input class="modalField" name="n2" value="v2" />
  <input class="modalField" name="n3" value="v3" />
</div>

Output:

[
  {
    "name": "n1",
    "value": "v1"
  },
  {
    "name": "n2",
    "value": "v2"
  },
  {
    "name": "n3",
    "value": "v3"
  }
]

answered Aug 14, 2020 at 13:10

Shadab

1,3578 silver badges9 bronze badges

3 Comments

I wrestled a bear once. Over a year ago

this isn't an associative array though, and there is a built-in jquery method that does exactly this.

Shadab Over a year ago

You're right. Didn't notice the associative word. Leaving this answer in in-case someone else misses it as well.

keewee279 Over a year ago

Thanks a lot for this too - it does help too.

VarunPrashar · Accepted Answer · 2020-08-14 13:13:00Z

0

Instead of having name & values array, I would suggest you to create an object.

var obj ={};
$('.modalField').each(function() {
    obj[$(this).attr('name')] = $(this).val();
   
});

So this way you will have your object like this (names used as example only): {"name1":"val1","name2":"val2","name3":"val3"}

answered Aug 14, 2020 at 13:13

VarunPrashar

344 bronze badges

2 Comments

keewee279 Over a year ago

This is very helpful too - I like the approach. Thanks a lot.

mplungjan Over a year ago

NOTE: that is identical to stackoverflow.com/a/63413402/295783 and first example of stackoverflow.com/a/63413444/295783

mplungjan · Accepted Answer · 2020-08-14 13:23:25Z

0

You say name-value but you seem to want an object

You can do EITHER

// Object
const obj = {};
$('.modalField').each(function() {
  const fieldName = $(this).attr('name');
  const fieldVal = $(this).val();
  obj[fieldName] = fieldVal
});

console.log(obj)

// OR Name-Value pair


const arr = $('.modalField').map(function() {
  return {
    [$(this).attr('name')]: $(this).val()
  }
}).get()


console.log(arr)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="a" value="1" class="modalField" />
<input name="b" value="2" class="modalField" />
<input name="c" value="3" class="modalField" />
<input name="d" value="4" class="modalField" />

edited Aug 14, 2020 at 13:23

answered Aug 14, 2020 at 13:10

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Collectives™ on Stack Overflow

jQuery: Loop through elements by class and create associative array

4 Answers 4

3 Comments

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related