CODEWITHSUNDEEP
javascriptarraysfor-loop
Roland
Roland

Reputation: 312

Javascript for loop to fill in object

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

Upvotes: 0

Views: 5373

Answers (7)

Evgeniy Volk
Evgeniy Volk

Reputation: 656

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

Upvotes: 1

Luan Bitar
Luan Bitar

Reputation: 139

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

Upvotes: 1

MKougiouris
MKougiouris

Reputation: 2861

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

Upvotes: 2

Guillaume
Guillaume

Reputation: 51

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

Upvotes: 1

epascarello
epascarello

Reputation: 207501

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)

Upvotes: 1

Bucket
Bucket

Reputation: 7521

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

Upvotes: 7

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48357

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

Upvotes: 7

Related Questions