Create JavaScript object with an array with a multi select field

Question

Hello I am looking to create a JavaScript object to store values captured from some fields. I have dynamic fields where the user can add more fields to the page.

I am able to capture and store the fields in an object using the below code.

var attributes = document.getElementsByName("attribute[]");
var locations = document.getElementsByName("location[]");

var len = attributes.length;
var data = []
for(var i = 0; i < len; i++){
   var element = {
     "Attribute": attributes[i].value,
     "Location": locations[i].value,
   };
   data.push(element);
 };

Recently I had to add a <select> field called "Methods" to the dynamic fields, that allows users to select multiple methods in the drop down. I am struggling on how I can get the array of selected methods per "Attribute".

Any help is greatly appreciated.

You mean that the select elements have the multiple attribute? — trincot
– trincot, Commented Feb 9, 2018 at 20:27
You do realise you can just push new objects (or arrays) into objects, right? We call it a 'multidimensional' object/array. Those things save programming lives. -- Or are you asking about how to GET the data you just SET? I'm sorry I'm a bit confused as to what you're asking, exactly. — NoobishPro
– NoobishPro, Commented Feb 9, 2018 at 20:30
@ScottMarcus, there are server-sided languages that use this information to create arrays server-side. — trincot
– trincot, Commented Feb 9, 2018 at 20:37

Ele · Accepted Answer · 2018-02-09 20:38:40Z

You can use a function as follow:

function extract(select) {
  var array = [];
  for (var i = 0; i < select.length; i++) {
    if (select.options[i].selected) array.push(select.options[i].value);
  }

  return array
}

document.querySelector('button').addEventListener('click', function() {
  var attributes = document.getElementsByName("attribute[]");
  var locations = document.getElementsByName("location[]");
  var methods = document.getElementsByName("methods[]");

  var len = attributes.length;
  var data = []
  for (var i = 0; i < len; i++) {
    function extract(select) {
      var array = [];
      for (var i = 0; i < select.length; i++) {
        if (select.options[i].selected) array.push(select.options[i].value);
      }

      return array;
    }

    var element = {
      "Attribute": attributes[i].value,
      "Location": locations[i].value,
      "Methods": extract(methods[i])
    };
    data.push(element);
  };
  
  console.log(data);
});

<input name='attribute[]' placeholder='attribute[]' value=''>
<input name='location[]' placeholder='location[]' value=''>
<select multiple name='methods[]'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
<p/>
<input name='attribute[]' placeholder='attribute[]' value=''>
<input name='location[]' placeholder='location[]' value=''>
<select multiple name='methods[]'>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>
<p/>
<button>Click me</button>

trincot · Accepted Answer · 2018-02-10 07:48:30Z

1

Let's say your select elements have a name attribute options:

var attributes = document.getElementsByName("attribute[]");
var locations = document.getElementsByName("location[]");
var options = document.getElementsByName("options[]"); //<--------

var len = attributes.length;
var data = [];
for(var i = 0; i < len; i++){
   var element = {
     "Attribute": attributes[i].value,
     // Grab the texts of the selected options:
     options: Array.from(options[i].querySelectorAll('option:checked'), 
                         option => option.textContent),
     "Location": locations[i].value,
   };
   data.push(element);
}

Note that you can use the Array.from callback argument (and short arrow function syntax) to create the data array:

var attributes = document.getElementsByName("attribute[]");
var locations = document.getElementsByName("location[]");
var options = document.getElementsByName("options[]");
var data = Array.from(attributes, (attrib, i) => ({
    Attribute: attrib.value,
    options: Array.from(options[i].querySelectorAll('option:checked'), 
                        option => option.textContent),
    Location: locations[i].value,
}));

edited Feb 10, 2018 at 7:48

answered Feb 9, 2018 at 20:39

trincot

357k38 gold badges282 silver badges339 bronze badges

2 Comments

Zachary Roberts Over a year ago

Thank you for your help! I tried this solution as well and it worked. Can see where I needed to make some changes.

trincot Over a year ago

You're welcome ;-) I see you went with the other answer & solution.

Collectives™ on Stack Overflow

Create JavaScript object with an array with a multi select field

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related