Add counter to property names in javascript

Question

I am trying to make my javascript script more dynamic but I am not really use to work with it, so I need help figuring out is it possible to add counter to the property names?

So I would like this code:

var title1 = document.getElementsByClassName('requestRightsTitle1')[0].value;
var email1 = document.getElementsByClassName('requestRightsEmail1')[0].value;
var title2 = document.getElementsByClassName('requestRightsTitle2')[0].value;
var email2 = document.getElementsByClassName('requestRightsEmail2')[0].value;
var title3 = document.getElementsByClassName('requestRightsTitle3')[0].value;
var email3 = document.getElementsByClassName('requestRightsEmail3')[0].value;
var title4 = document.getElementsByClassName('requestRightsTitle4')[0].value;
var email4 = document.getElementsByClassName('requestRightsEmail4')[0].value;

to do something like:

var inputFields = [];

for (i = 1; i <= 5; i++) {
   inputFields.push({
       title: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       email: document.getElementsByClassName('requestRightsEmail'+i)[0].value
       })
}

But i need this title and email to be title1, email1, title2, email2...

I tried:

for (i = 1; i <= 5; i++) {
    inputFields.push({
         'title'+i: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
         'email'+i: document.getElementsByClassName('requestRightsEmail'+i)[0].value
    })
}

and similar things like that, but no success. If there is a way to achieve that, please share your solution. Thanks in advance.

why can't you use inputFields[i].title? replace i for the index of the one you want to view — Pete
– Pete, Commented Jun 18, 2018 at 11:43
Using “numbered” class names is kinda nonsense to begin with. — C3roe
– C3roe, Commented Jun 18, 2018 at 11:52

T.J. Crowder · Accepted Answer · 2018-06-18 11:43:43Z

3

There's no need to put a numeric suffix on the property names. You're putting the properties in different objects, so just use title and email, so your objects have a consistent set of property names:

for (i = 1; i <= 5; i++) {
   inputFields.push({
       title: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       email: document.getElementsByClassName('requestRightsEmail'+i)[0].value
   });
}

Live Example:

var i;
var inputFields = [];
for (i = 1; i <= 3; i++) {
   inputFields.push({
       title: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       email: document.getElementsByClassName('requestRightsEmail'+i)[0].value
   });
}
console.log(inputFields);

.as-console-wrapper {
  max-height: 100% !important;
}

<input class="requestRightsTitle1" value="title 1">
<input class="requestRightsEmail1" value="email 1">
<br>
<input class="requestRightsTitle2" value="title 2">
<input class="requestRightsEmail2" value="email 2">
<br>
<input class="requestRightsTitle3" value="title 3">
<input class="requestRightsEmail3" value="email 3">

But if you really had a reason to do it:

With ES2015+ syntax, you can use a computed property name for that:

for (i = 1; i <= 5; i++) {
   inputFields.push({
       ["title" + i]: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       ["email" + i]: document.getElementsByClassName('requestRightsEmail'+i)[0].value
   });
}

Before ES5, you had to create the object first and then add the properties:

for (i = 1; i <= 5; i++) {
   var obj = {};
   obj["title" + i] = document.getElementsByClassName('requestRightsTitle'+i)[0].value;
   obj["email" + i] = document.getElementsByClassName('requestRightsEmail'+i)[0].value;
   inputFields.push(obj);
}

answered Jun 18, 2018 at 11:43

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

user2450639 Over a year ago

Yes, thanks for that, but if the names are title and email, how would I get the value of let say email3? If all object have the name title and email.

T.J. Crowder Over a year ago

@user2450639: You'd index into the array: inputFields[2].email in the above is "email 3" (because array indexes start at 0).

Bhagyashree Sarkar · Accepted Answer · 2018-06-18 11:50:46Z

1

You can do this:

for (i = 1; i <= 5; i++) {
    var temp_title = "title"+i;
    var temp_email = "email"+i;
   inputFields.push({
       [temp_title]: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       [temp_email]: document.getElementsByClassName('requestRightsEmail'+i)[0].value
       })
}

answered Jun 18, 2018 at 11:50

Bhagyashree Sarkar

5194 silver badges13 bronze badges

Collectives™ on Stack Overflow

Add counter to property names in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related