Javascript for loop to fill in object

Question

I have an array of domains: var domains = ["domain1", "domain2", "domain3"];

Expected result should be:

var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 options: [
 {text: 'domain1', value: 'domain1'},
 {text: 'domain2', value: 'domain2'},
 {text: 'domain3', value: 'domain3'},
 ]
};

This is what I was trying to do, but it doesn't work:

for(var i = 0; i < domains.length; i++) {
 console.log(domains[i]);
 var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 options: [{
 text: domains[i],
 value: domains[i],
 }]
 };
}

You can play with code here: https://jsbin.com/vadered/edit?js,console

• epascarello: because you keep recreating the parent object and not the child object

Answer 1

Move the domainData object outside your function loop, then add the values for options:

var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 options: []
};
for(var i = 0; i < domains.length; i++) {
 domainData.options.push({ 'text':domains[i], 'value': domains[i] });
}

Answer 2

The issue is that you're creating every time a new domainData object using the for loop.

You can use map method by passing a callback provided function which is applied for every item from your given array.

var domains = ["domain1", "domain2", "domain3"];
var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 options: domains.map(elem=> ({text:elem, value:elem}))
};
console.log(domainData);

Answer 3

You do not need a loop for that, since you actually have only 1 object.

What you need is to transform your domain array to options inside your other object. Try this:

var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 options: domains.map(function(d){ return {text: d, value: d}})
 };

Answer 4

Issue you have is you are recreating the parent object on each iteration and not appending to the child array

So create the child array and use that when you create the object.

var domains = ["domain1", "domain2", "domain3"];
var options = domains.map(function(domain) {
 return {
 text: domain,
 value: domain
 }
})
// without map
// var options = [];
// for (var i=0; i<domains.length; i++) {
// options.push({text: domains[i], value: domains[i]}
// }
var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 options: options
};
console.log(domainData)

Answer 5

i played a little bit with your code and ended up with this:

var domains = ["domain1", "domain2", "domain3"];
var optionsBis = [];
for(var i = 0; i < domains.length; i++) {
 optionsBis.push({
 text: domains[i],
 value: domains[i]
 })
}
var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 options:optionsBis
};
console.log(domainData)

Hope it helps

Answer 6

var domains = ["domain1", "domain2", "domain3"];
var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 options: []
 };
domains.forEach(domain => {
 domainData.options.push({
 text: domain,
 value: domain
 })
});
console.log(domainData);

You need to remove the main content of domainData out of iterator, and push domains to options, like this:

var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 options: []
 };
domains.forEach(domain => {
 domainData.options.push({
 text: domain,
 value: domain
 })
});

Answer 7

It's better to create a new copy of object domainData, because of possible nested values.

var domains = ["domain1", "domain2", "domain3"];
var domainData = {
 type: 'combo',
 name: 'domain',
 width: 200,
 offsetLeft: 30,
 label: 'Test label',
 required: true,
 };
var newObjectData = Object.assign( {}, domainData, {options: domains.map((val) => ({text: val, value: val}))} );

• Jeremy Thille: A bit more complex than the others, but valid nonetheless
• Evgeniy Volk: Safety need a little more complexity.