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

because you keep recreating the parent object and not the child object — epascarello
– epascarello, Commented Aug 14, 2018 at 13:47

Bucket · Accepted Answer · 2018-08-14 13:50:13Z

7

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] });
}

answered Aug 14, 2018 at 13:50

Bucket

7,5599 gold badges38 silver badges48 bronze badges

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

Comments

Mihai Alexandru-Ionut · Accepted Answer · 2018-08-14 13:47:47Z

7

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

answered Aug 14, 2018 at 13:47

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Comments

MKougiouris · Accepted Answer · 2018-08-14 13:52:26Z

2

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}})
  };

answered Aug 14, 2018 at 13:52

MKougiouris

2,8711 gold badge18 silver badges20 bronze badges

Comments

epascarello · Accepted Answer · 2018-08-14 13:50:20Z

1

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)

answered Aug 14, 2018 at 13:50

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Guillaume · Accepted Answer · 2018-08-14 13:51:38Z

1

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

answered Aug 14, 2018 at 13:51

Guillaume

511 silver badge5 bronze badges

Comments

Luan Bitar · Accepted Answer · 2018-08-14 13:53:18Z

1

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
  })
});

answered Aug 14, 2018 at 13:53

Luan Bitar

1396 bronze badges

Comments

Evgeniy Volk · Accepted Answer · 2018-08-14 13:58:36Z

1

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}))} );

answered Aug 14, 2018 at 13:58

Evgeniy Volk

6565 silver badges7 bronze badges

2 Comments

Jeremy Thille Over a year ago

A bit more complex than the others, but valid nonetheless

Evgeniy Volk Over a year ago

Safety need a little more complexity.

Collectives™ on Stack Overflow

Javascript for loop to fill in object

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related