Use array key in value's function in Javascript?

Question

I want an associative array object of the string of an HTML element's name to the hidden input element. Like so...

var fieldNames2inputElements = {
    'FirstName' : document.getElementsByName('FirstName')[0],
    'LastName'  : document.getElementsByName('LastName')[0],
    ...
};

I'm already shaking my head at myself, knowing there's got to be a more DRY way of doing this. Any suggestions? How do I use the string key of an associative array as a parameter of something in the value for that key?

BTW: I don't have control of the hidden input elements having this name attribute versus an id or some other way of selecting it.

The least you touch the DOM the better as per performance. Hence you should do only two document.querySelectorAll() operations, one for each firstname and lastname. Then using Array.prototype.map.call(firstNames, c => {...}); and then the same for the lastNames is one way of doing this job. — Redu
– Redu, Commented Apr 10, 2016 at 1:20

Ram · Accepted Answer · 2016-04-10 00:35:22Z

5

You could define a helper function that accepts name of the target elements and returns an object:

function getByName(names) {
   return names.reduce(function(ret, name) {
       ret[name] = document.querySelector('input[name="'+ name +'"]');
       return ret;
   }, {});
}

var fieldNames2inputElements = getByName(['FirstName', 'lastName', '...']);

answered Apr 10, 2016 at 0:35

Ram

145k16 gold badges174 silver badges201 bronze badges

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

Comments

jib · Accepted Answer · 2016-04-10 00:53:26Z

1

I would write (with es6 arrow functions):

var fieldNames2inputElements = ['FirstName', 'LastName']
  .reduce((o, name) => (o[name] = document.getElementsByName(name)[0], o), {});

answered Apr 10, 2016 at 0:53

jib

42.8k17 gold badges111 silver badges166 bronze badges

Comments

guest271314 · Accepted Answer · 2016-04-10 00:49:59Z

0

You can use a for loop, document.querySelectorAll() with selector "input[name$=Name][type=hidden]" as parameter

for (var i = 0, elems = document.querySelectorAll("input[name$=Name][type=hidden]")
     , fieldNames2inputElements = {}
     ; i < elems.length; i++) {
  fieldNames2inputElements[elems[i].name] = elems[i]
};
console.log(fieldNames2inputElements)

<input name="FirstName" type="hidden" />
<input name="LastName" type="hidden" />

answered Apr 10, 2016 at 0:49

guest271314

1

Collectives™ on Stack Overflow

Use array key in value's function in Javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related