Populating a select element with comma-separated values using for loop - javascript

I have a bunch of comma-separated values stored as strings in a JSON file. My aim is to split these values to populate a select element which is based on Selectize.js. Code (excerpt) looks as follows:
var options = {};
var attr_split = data.attributes['Attribute1'].split(",");
var options_key;
for (var i = 0; i < attr_split.length; i++) {
options_key = attr_split[i]
}
var options_values = {
value: options_key,
text: options_key,
}
if (options_key in options)
options_values = options[options_key];
options[options_key] = options_values;
$('#input').selectize({
options: options,
});
Although this seems to work, the output in the select element only shows the last iterations done by the for loop. As per here
and here, I've tried
for (var i = 0; i < attr_split.length; i++) {
var options_key += attr_split[i]
}
but this throws me undefined plus all concatenated strings without the separator as per the following example:
undefinedAttr1Attr2Attr3
When I simply test the loop using manual input of the array elements everything appears fine:
for (var i = 0; i < attr_split.length; i++) {
var options_key = attr_split[0] || attr_split[1] || attr_split[2]
}
But this is not the way to go, since the number of elements differs per string.
Any idea on what I'm doing wrong here? I have the feeling it's something quite straightforward :)

when you declare 'options_key' ,you are not initializing it.so its value is undefined .when you concatenate options_key += attr_split[i] .in first iteration options_key holds undefined.so only you are getting undefinedAttr1Attr2Attr3.
so declare and initialize options_key like.
var options_key="";
and in your loop
for (var i = 0; i < attr_split.length; i++)
{
options_key = attr_split[i]
}
Everytime you replace options_key with value of attr_split[i].so after the loop it will contain last element value.corrected code is
for (var i = 0; i < attr_split.length; i++)
{
options_key += attr_split[i]
}

Just change var options_key; to var options_key="";
The reason you are getting undefined is because you have not defined the variable properly.
Here is a working example
var attr_split = "1,2,3,4".split(",");
var options_key="";
for (var i = 0; i < attr_split.length; i++) {
options_key += attr_split[i]
}
alert(options_key);
var options_values = {
value: options_key,
text: options_key
}
alert(options_values);

Related

How to check the visibility of a datatable row?

Is it possible to check the visibility of the particular datatable row?
I found only isColumnVisible and getVisibleCount, but both of them are irrelevant and as far as I can see, there's no such solution for the rows.
How can I do such thing? For instance, after the filtering I can get all data items, but that's all. It's the only idea I've come up with:
onAfterFilter:function(){
var dataId = this.data.pull;
var keys = Object.keys(dataId);
for (var i = 0; i < keys.length; i++){
console.log(this)
}
}
http://webix.com/snippet/c6ecdcd5
Ok it feels like a long way of doing this. And I've not done anything other than just get it to work.
But you will find all of the ids you need in this.data.order so the following code puts all the filtered items into filteredObjs
var dataId = this.data.pull;
var keys = Object.keys(dataId);
var filteredIds = this.data.order;
var filteredObjs = [];
for (var i = 0; i < filteredIds.length; i++) {
for (var j = 0; j < keys.length; j++) {
if (filteredIds[i] === dataId[keys[j]].id) {
filteredObjs.push(dataId[keys[j]]);
}
}
}
console.log(filteredObjs);
Not saying its perfect. But its a start...
For starters you need to change console.log(this) to console.log(keys[i])
As an alternative to the data-based solution made by #ShaunParsons I found that it's possible to check the visibility through the getItemNode function, as the nodes of the invisible items are undefined.
http://webix.com/snippet/4f31a5b5
onAfterFilter:function(){
var dataId = this.data.pull;
var keys = Object.keys(dataId);
for (var j = 0; j < keys.length; j++) {
console.log(this.getItemNode(keys[j]))
}
}

Remove attributes from html string - error with removeAttributeNode

I am trying to remove all attributes except for certain whitelisted ones from a long html string. I am using the DOM to parse it.
I know there are a lot of other questions about this, but my question is specifically about the error I am getting with executing removeAttributeNode in my code below.
var div = document.createElement('div');
div.innerHTML = '<p class=\"p\">text here</p> <div id=\"divId\"></div>';
var elements = div.getElementsByTagName('*');
var whitelist = ["src", "width", "height"];
for (var i = 0; i < elements.length; i++) {
if (elements[i].attributes.length !== 0) {
var attr = elements[i].attributes;
for (var j = 0; j < attr.length; j--) {
var attrName = attr[j].name;
for (var k = 0; k < whitelist.length; k++) {
if (attrName !== whitelist[k])
elements[i].removeAttributeNode(attr);
}
}
}
}
But, I keep getting the following error: Failed to execute 'removeAttributeNode ' on Element: the 1st argument provided is either null, or an invalid Attr object.
But, I checked with console statements and elements[i] is not null. For example, elements[0] = <p class="p">. How do I get removeAttributeNode to work? Thank you for your help!
In the last loop, do something like this.
for (var k = 0; k < whitelist.length; k++) {
if (attrName !== whitelist[k])
{
elements[i].removeAttributeNode(elements[i].getAttributeNode(attrName ));
}
}

Quick methods Javascript/Jquery/etc to retrieve all aspnet:textbox (input) contained in a form, excluding other elements

I created a 'test Label' or alert to see values of variables (some way to know values of variables like in Matlab?)
How can I change so i can retrieve the correct number of elements as required (and not value '0' or 'all elements' or 'errors')?
Code is this:
var lenform = document.getElementById("ActionInMoveID").length;
var selform = document.getElementById("ActionInMoveID");
var count = 0;
for (var k = 0; k < lenform; k++)
{
if (selform.elements[k].tagName == "input")
count++;
}
alert(count);
Thanks a lot
In JavaScript:
var count = document.getElementsByTagName("input").length;
In jQuery:
var count = $('#form').find(':input').length;
To retrieve each one of inputs in JavaScript:
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
// do what you wan to do with inputs[i] element
}
in jQuery:
$('#form').find(':input').each(function(){
// do what you wan to do with $(this) element
})

Why does this for loop not run? jQuery

http://jsfiddle.net/leongaban/BvuT5/
Trying to get the 2nd alert to popup twice, however seems like the for loop isn't even running.
jQuery
var wireRequestorCard = function(jarjar) {
alert('1st alert');
var loop_num = 0;
for (var i = 0, length = jarjar.length; i < length; i++) {
loop_num = i;
alert('Where is this Alert? '+i);
}
alert('Closing Alert');
}
var jarjar = 2;
wireRequestorCard(jarjar);
You aren't passing an array or string to the function, which does not have a length property. Instead jarjar is a number.
jarjar is an integer.
it does not have a length property.
You just need to compare i to jarjar:
for (var i = 0; i < jarjar; i++) {
alert('Here is this Alert! '+i);
}
http://jsfiddle.net/daCrosby/BvuT5/5/

getElementsByName won't loop through entire array

The following code executes on the press of a button. It works fine alerting one string of the getElementsByName array, but when introduced to a loop, it still only alerts the first string value, and nothing more:
function checkvals() {
var input = document.getElementsByName('ModuleTitle', 'ModuleCode', 'BuildingName', 'Day');
var i = 0;
for (i = 0; i <= input.length; i++){
alert(input[i].value);
}
}
That's because getElementsByName only accepts one argument, so it's only fetching the first name.
You can build a full collection like this...
var names = ['ModuleTitle', 'ModuleCode', 'BuildingName', 'Day'];
var input = [];
for(var i = 0; i < names.length; i++) {
var name_els = document.getElementsByName(names[i]);
for(var j = 0; j < name_els.length; j++) {
input.push(name_els[j]);
}
}
Then loop over the input Array, (or just do your work in the inner loop).
Additionally, you have a bug.
This...
for (i = 0; i <= input.length; i++){
should be this...
for (i = 0; i < input.length; i++){
...otherwise, you'll go one past the last index.
That's because getElementsByName only takes a single name argument, and returns all elements with that value for their name attribute. (See https://developer.mozilla.org/en/DOM/document.getElementsByName.) If you have multiple names to look up, you'll have to call it multiple times.

Categories