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 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>
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,
}));
Related
I want to create a function in order to programmatically add some elements on a page.
Lets say I want to add a drop-down list with four options:
<select name="drop1" id="Select1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
How can I do that?
This will work (pure JS, appending to a div of id myDiv):
Demo: http://jsfiddle.net/4pwvg/
var myParent = document.body;
//Create array of options to be added
var array = ["Volvo","Saab","Mercades","Audi"];
//Create and append select list
var selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement("option");
option.value = array[i];
option.text = array[i];
selectList.appendChild(option);
}
var sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';
var cars = [
"volvo",
"saab",
"mercedes",
"audi"
];
var options_str = "";
cars.forEach( function(car) {
options_str += '<option value="' + car + '">' + car + '</option>';
});
sel.innerHTML = options_str;
window.onload = function() {
document.body.appendChild(sel);
};
I have quickly made a function that can achieve this, it may not be the best way to do this but it simply works and should be cross browser, please also know that i am NOT a expert in JavaScript so any tips are great :)
Pure Javascript Create Element Solution
function createElement(){
var element = document.createElement(arguments[0]),
text = arguments[1],
attr = arguments[2],
append = arguments[3],
appendTo = arguments[4];
for(var key = 0; key < Object.keys(attr).length ; key++){
var name = Object.keys(attr)[key],
value = attr[name],
tempAttr = document.createAttribute(name);
tempAttr.value = value;
element.setAttributeNode(tempAttr)
}
if(append){
for(var _key = 0; _key < append.length; _key++) {
element.appendChild(append[_key]);
}
}
if(text) element.appendChild(document.createTextNode(text));
if(appendTo){
var target = appendTo === 'body' ? document.body : document.getElementById(appendTo);
target.appendChild(element)
}
return element;
}
lets see how we make this
<select name="drop1" id="Select1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
here's how it works
var options = [
createElement('option', 'Volvo', {value: 'volvo'}),
createElement('option', 'Saab', {value: 'saab'}),
createElement('option', 'Mercedes', {value: 'mercedes'}),
createElement('option', 'Audi', {value: 'audi'})
];
createElement('select', null, // 'select' = name of element to create, null = no text to insert
{id: 'Select1', name: 'drop1'}, // Attributes to attach
[options[0], options[1], options[2], options[3]], // append all 4 elements
'body' // append final element to body - this also takes a element by id without the #
);
this is the params
createElement('tagName', 'Text to Insert', {any: 'attribute', here: 'like', id: 'mainContainer'}, [elements, to, append, to, this, element], 'body || container = where to append this element');
This function would suit if you have to append many element, if there is any way to improve this answer please let me know.
edit:
Here is a working demo
JSFiddle Demo
This can be highly customized to suit your project!
This code would create a select list dynamically. First I create an array with the car names. Second, I create a select element dynamically and assign it to a variable "sEle" and append it to the body of the html document. Then I use a for loop to loop through the array. Third, I dynamically create the option element and assign it to a variable "oEle". Using an if statement, I assign the attributes 'disabled' and 'selected' to the first option element [0] so that it would be selected always and is disabled. I then create a text node array "oTxt" to append the array names and then append the text node to the option element which is later appended to the select element.
var array = ['Select Car', 'Volvo', 'Saab', 'Mervedes', 'Audi'];
var sEle = document.createElement('select');
document.getElementsByTagName('body')[0].appendChild(sEle);
for (var i = 0; i < array.length; ++i) {
var oEle = document.createElement('option');
if (i == 0) {
oEle.setAttribute('disabled', 'disabled');
oEle.setAttribute('selected', 'selected');
} // end of if loop
var oTxt = document.createTextNode(array[i]);
oEle.appendChild(oTxt);
document.getElementsByTagName('select')[0].appendChild(oEle);
} // end of for loop
Here's an ES6 version of the answer provided by 7stud.
const sel = document.createElement('select');
sel.name = 'drop1';
sel.id = 'Select1';
const cars = [
"Volvo",
"Saab",
"Mercedes",
"Audi",
];
const options = cars.map(car => {
const value = car.toLowerCase();
return `<option value="${value}">${car}</option>`;
});
sel.innerHTML = options;
window.onload = () => document.body.appendChild(sel);
const countryResolver = (data = [{}]) => {
const countrySelecter = document.createElement('select');
countrySelecter.className = `custom-select`;
countrySelecter.id = `countrySelect`;
countrySelecter.setAttribute("aria-label", "Example select with button addon");
let opt = document.createElement("option");
opt.text = "Select language";
opt.disabled = true;
countrySelecter.add(opt, null);
let i = 0;
for (let item of data) {
let opt = document.createElement("option");
opt.value = item.Id;
opt.text = `${i++}. ${item.Id} - ${item.Value}(${item.Comment})`;
countrySelecter.add(opt, null);
}
return countrySelecter;
};
Here's an ES6 version, conversion to vanilla JS shouldn't be too hard but I already have jQuery anyways:
function select(options, selected) {
return Object.entries(options).reduce((r, [k, v]) => r.append($('<option>').val(k).text(v)), $('<select>')).val(selected);
}
$('body').append(select({'option1': 'label 1', 'option2': 'label 2'}, 'option2'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
const cars = ['Volvo', 'Saab', 'Mervedes', 'Audi'];
let domSelect = document.createElement('select');
domSelect.multiple = true;
document.getElementsByTagName('body')[0].appendChild(domSelect);
for (const i in cars) {
let optionSelect = document.createElement('option');
let optText = document.createTextNode(cars[i]);
optionSelect.appendChild(optText);
document.getElementsByTagName('select')[0].appendChild(optionSelect);
}
it's very simple yet tricky but here is what you wanted, hope it's helpful :
this function generates a select list from 1990 to 2018
i think this example can help ya, if you want to add any other value just
change value of x and y ;)
function dropDown(){
var start = 1990;
var today = 2019;
document.write("<select>");
for (var i = start ; i <= today; i++)
document.write("<option>" + i + "</option>");
}
document.write("</select>");
dropDown();
I'm trying to build a JSON like this and send it server via form post. All these json values are from select options in the UI.
{
"pages":[
{
"id":"messages",
"name":"yourinbox",
"value":"ACTIVE"
},
{
"id":"emails",
"name":"newmail",
"value":"INACTIVE"
}
]
}
I've tried with below code, but i'm not able to get the correct format.
Any help? Thanks!
var self = this;
var request = new HttpRequest();
this.form$ = $(selector);
self.form$.find('.loader').hide();
this.onSubmit = function(e){
hideSubmit();
e.preventDefault();
e.stopPropagation();
var parsedata = {};
var data = {};
var selectedOptions = self.form$.find('select');
for (var i = 0, ii = selectedOptions.length; i < ii; ++i) {
var input = selectedOptions[i];
data["name"] = input.id;
data["value"] = input.value;
parsedata.push(data); } };
This is the rough approach; Feel free to improvise.
let object = {"pages" : []};
let options = document.getElementsByTagName("option");
for(i=0;i<options.length; i++) {
object["pages"][i] = {}
object["pages"][i]["id"] = options[i].getAttribute('id');
object["pages"][i]["value"] = options[i].getAttribute('value');
let activeStatus = options[i].getAttribute('selected');
if(activeStatus == "true") object["pages"][i]["activeStatus"] = activeStatus;
else object["pages"][i]["activeStatus"] = false;
}
console.log(object)
<select>
<option id="1" value="One" selected=true>One</option>
<option id="2" value="Two">Two</option>
<option id="3" value="Three">Three</option>
<option id="4" value="Four">Four</option>
</select>
I'm trying to change the options that appear in my select box named session when a certain option is picked in my select box named movie.
Here's the script I've got so far.
<script>
var optionList = document.getElementsByName("movie")[0];
var movieList = ["AC", "CH", "AF", "RC"];
for(var i = 0; i < movieList.length; i++){
var movie = movieList[i];
var option = document.createElement("option");
option.textContent = movie;
option.value = movie;
optionList.appendChild(option);
}
</script>
<script>
var sessionList = document.getElementsByName("session")[0];
var actionSession = ["WED-09", "THU-09", "FRI-09", "SAT-09", "SUN-09"];
var childrenSession = ["MON-01", "TUE-01", "WED-06", "THU-06", "FRI-06", "SAT-12", "SUN-12"];
var foreignSession = ["MON-06", "TUE-06", "SAT-06", "SUN-06"];
var romanticSession = ["MON-09", "TUE-09", "WED-01", "THU-01", "FRI-01", "SAT-06", "SUN-06"];
if(document.getElementsByName("movie")[0].value === movieList[0])
{
for(var i = 0; i < actionSession.length; i++){
var session = actionSession[i];
var option = document.createElement("option");
option.textContent = session;
option.value = session;
sessionList.appendChild(option);
}
}
</script>
Consider changing the Sessions to an object, like so:
var sessions = {
"AC": ["WED-09", "THU-09", "FRI-09", "SAT-09", "SUN-09"],
"CH": ["MON-01", "TUE-01", "WED-06", "THU-06", "FRI-06", "SAT-12", "SUN-12"],
"AF": ["MON-06", "TUE-06", "SAT-06", "SUN-06"],
"RC": ["MON-09", "TUE-09", "WED-01", "THU-01", "FRI-01", "SAT-06", "SUN-06"]
}
This way, you can use the onchange of your select tag to get the value of the selected option and reference the list of sessions for the appropriate movie list as such:
var category = document.getElementByName("movie").value;
var currentSession = sessions[category];
for(var i = 0; i < currentSession.length; i++){
var session = currentSession[i];
var option = document.createElement("option");
option.textContent = session;
option.value = session;
sessionList.appendChild(option);
}
Objects in javascript can be referenced as "key" => "value" pairs simply by following the syntax:
object = { "key": value }, and value's type can be anything - even another Object!
You can even declare object keys like such:
var sessions = {};
sessions['AC'] = [...];
sessions['CH'] = [...];
sessions.AF = [...];
sessions.RC = [...];
That's right - all of the above declarations can be referenced as sessions['xx']
Hope this simplifies things a bit.
You could create a dictionary mapping elements of movieList to lists of <option> elements, maybe?
You might call the dictionary sessionOptions. You would then change all the children of #session at once - so this would go in your onchange handler for sessionList:
var sessionList = document.getElementsByName("session")[0];
var chosenMovie = "..."; // "AC", for instance
// Remove all elements from sessionList
while(sessionList.firstChild) {
sessionList.removeChild(sessionList.firstChild);
}
// Add the chosen movie options
var chosenMovieOptions = sessionOptions[chosenMovie];
for(var i = 0; i < chosenMovieOptions.length; i++) {
sessionList.appendChild(chosenMovieOptions[i]);
}
You would also want to make a mapping of movie codes to session lists:
var SESSION_LISTS = {
"AC": ["WED-09", "THU-09", "FRI-09", "SAT-09", "SUN-09"],
"CH": ["MON-01", "TUE-01", "WED-06", "THU-06", "FRI-06", "SAT-12", "SUN-12"],
"AF": ["MON-06", "TUE-06", "SAT-06", "SUN-06"],
"RC": ["MON-09", "TUE-09", "WED-01", "THU-01", "FRI-01", "SAT-06", "SUN-06"]
};
Then, to build sessionOptions, for each "session string list" (such as actionSession), you would loop through the session list and create elements:
var currentSession = "..."; // currentSession is the current session list - "AC", for instance
var currentSessionOptions = SESSION_LISTS[currentSession];
sessionOptions[currentSession] = [];
for(var i = 0; i < currentSessionOptions.length; i++){
var session = currentSessionOptions[i];
var option = document.createElement("option");
option.textContent = session;
option.value = session;
sessionOptions[currentSession].append(option);
}
But then you would do this for every sublist in SESSION_LISTS, so you would put this code in some initializer function:
var sessions = Object.keys(SESSION_LISTS);
for(var i = 0; i < sessions.length; i++) {
currentSession = sessions[i];
// the code snippet above
}
This is my select ID with data fetched from the database
HTML
<select id = "mySelectID" name = "select" data-sel="select">
<option value=""></option>
</select>
JSON
var jsonData = [{"id":"jmbaaaro#kaps.co.ke","passkey":null},{"id":"willson#gmail.com","passkey":"3694"},{"id":"info#llvswaterboard.go.ke","passkey":null},{"id":"rundda#athiwater.com","passkey":"5576"},{"id":"pk#.k.com","passkey":"1835"},{"id":"pkinnyanjui#kaps.co.ke","passkey":null},{"id":"wilsson#gmail.com","passkey":"3694"}{"id":"wycllif#kaps.co.ke","passkey":"2318"},{"id":"wycllif#gmail.com","passkey":"2318"},{"id":"alexx#gmail.com","passkey":"2710"},{"id":"wilsson#gmail.com","passkey":"3694"},{"id":"barbeggambo#gmail.com","passkey":"8917"},{"id":"bachu#gmail.com","passkey":"5857"}]
JAVASCRIPT
var jsonData = JSON.parse(data);
//var jsonData = JSON.parse(s);
var select = $$('#mySelectID');
for (var i = 0; i < jsonData.length; i++) {
var option = $("<option/>").attr("value",jsonData[i].id).text(jsonData[i].id);
select.append(option);
}
$("select#mySelectID").change(function(){
var selectedmail = $("#mySelectID").val();
var s = jsonData.filter(function (e){
return e.id ==='3694';
});
I am trying to get the value with passkey 3694. Please Assist i am new to javascript.
I've this HTML table:
<table class="table table-condensed">
<thead>
<tr>
<th><input type="checkbox" id="toggleCheckboxSelFabricante" name="toggleCheckboxSelFabricante"></th>
<th>Fabricante</th>
</tr>
</thead>
<tbody id="selFabricanteBody">
<tr>
<td><input type="checkbox" name="selChkFabricante" id="selChkFabricante3" value="3"></td>
<td>Eos est ipsam.</td>
</tr>
</tbody>
</table>
I need to create a key => value for manufacturerColl var where id is the value of each checked checkbox (first td on the table) and name is the text on the second column but don't know how to. This is what I've in my code:
var checkedModelBranch = $("#parMarcaModeloFabricanteBody").find("input[type='checkbox']:checked"),
checkedManufacturers = $("#selFabricanteBody").find("input[type='checkbox']:checked"),
manufacturerColl = [],
modelBranchManufacturerCollection;
for (var j = 0; j < checkedManufacturers.length; j++) {
manufacturerColl.push(checkedManufacturers[j].value);
}
for (var i = 0; i < checkedModelBranch.length; i++) {
modelBranchManufacturerCollection = addNewRelationModelBranchManufacturer(checkedModelBranch[i].value, manufacturerColl);
if (modelBranchManufacturerCollection) {
for (var k = 0; k < modelBranchManufacturerCollection.manufacturerKeyCollection.length; k++) {
$("#parMarcaModeloFabricanteBody td#" + checkedModelBranch[i].value).html(modelBranchManufacturerCollection.manufacturerKeyCollection[k] + '<br/>');
}
}
}
What I need in others words is for each manufacturerColl have and id => name, ex:
manufacturerColl[] = {
id: someId,
name: someName
};
And I'm not sure but maybe this could work:
// move foreach selected checkbox and get the needed
for (var j = 0; j < checkedManufacturers.length; j++) {
manufacturerColl.push({
id: checkedManufacturers[j].value,
name: "" // how do I get the value on the second column?
});
}
Which is the right way to do this? How do I get the value on the second column on each iteration?
Approach
I don't know if this is complete right but is what I've done and it's buggy. See the code:
var checkedModelBranch = $("#parMarcaModeloFabricanteBody").find("input[type='checkbox']:checked"),
checkedManufacturers = $("#selFabricanteBody").find("input[type='checkbox']:checked"),
// I added this var to get all the names
checkedManufacturersName = $("#selFabricanteBody").find("input[type='checkbox']:checked").parent().next('td').text(),
manufacturerColl = [],
modelBranchManufacturerCollection;
for (var j = 0; j < checkedManufacturers.length; j++) {
manufacturerColl.push({
id: checkedManufacturers[j].value,
// Here I'm tying to put the entire name but get only the first character
name: checkedManufacturersName[j]
});
}
for (var i = 0; i < checkedModelBranch.length; i++) {
modelBranchManufacturerCollection = addNewRelationModelBranchManufacturer(checkedModelBranch[i].value, manufacturerColl);
if (modelBranchManufacturerCollection) {
//$("#parMarcaModeloFabricanteBody td#" + checkedModelBranch[i].value).siblings().attr("rowspan", modelBranchManufacturerCollection.manufacturerKeyCollection.length);
for (var k = 0; k < modelBranchManufacturerCollection.manufacturerKeyCollection.length; k++) {
// then I render the name attribute from the collection
$("#parMarcaModeloFabricanteBody td#" + checkedModelBranch[i].value).append((modelBranchManufacturerCollection.manufacturerKeyCollection)[k].name + '<br/>');
}
}
}
Why I'm inserting/getting the first character only and not the complete string?
//Since your input and text are wrapped in td elements
In the code:
var checked = $('#selFabricanteBody').find('input[type="checkbox"]:checked');
var arr = [], j = checked.length, item;
while(j--) {
item = list[j];
//gets the text from the next child, assumes its the text
//if the text is before checkbox, use previousSibling
arr.push({id: item.value, name: item.parentNode.nextSibling.nodeValue});
}
This is what I use to create an object, for sending to a controller method that is looking for a class/model as a parameter:
function ExtractModel(array) {
var modelString = '';
var model = {};
//var array = arrayString.split('&');
var isObjectModel = $.isPlainObject(array);
if (!isObjectModel) {
$(array).each(function (index, element) {
var typeId = element.split('=')[0];
var val = element.split('=')[1];
if (element == null) { } else {
model[typeId] = (val);
}
});
} else {
model = array;
}
return model;
};
So, with this, I am taking a url parameter string and creating an object from it; the parameter string is generated from serializing the form. The "model" automatically creates the property that is represented by "typeId"; if "typeId" = "hello", then a new property or object item will be created, named "hello" (model.hello will get you a value). You can use this same logic to loop through the elements on your page to populate the object with multiples. Make sure to set your variable "modelBranchManufacturerCollection" equal to {}, and to then set the index of where to insert a new one.
This should do what you want:
var ids = [1, 2, 3, 4, 5, 6]
var names = ['a', 'b', 'c', 'd', 'e', 'f']
var mainObj = {};
$(ids).each(function (index, element) {
var miniObj = {};
miniObj['id'] = ids[index];
miniObj['name'] = names[index];
mainObj[index] = miniObj;
});
returns 6 items of id and name.