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

Question

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

Certainly. This is how it's stored in the JSON: "Attribute1":"Attr1,Attr2" — ACDSL
– ACDSL, Commented Mar 11, 2015 at 23:00

balajisoundar · Accepted Answer · 2015-03-11 06:25:58Z

1

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

answered Mar 11, 2015 at 6:25

balajisoundar

5712 silver badges11 bronze badges

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

6 Comments

ACDSL Over a year ago

Thanks. This indeed resolves the undefined, however leads to all split strings being concatenated again in the select input. Thus like this: Attr1Attr2Attr3. My goal is to have the results of the split strings show up as separate values, thus as Attr1, Attr2 and Attr3. This works when using options_key = attr_split[i], but only shows the last iteration. Any idea on how to populate the select with the separated values, including all other iterations next to also the last one?

balajisoundar Over a year ago

can you post the code that populates select element.

ACDSL Over a year ago

Thanks for the fiddle! I think I get how it works in your example. My options are however populated in an options variable, which is then fed into an input element which is based on Selectize.js. I added the code which does this to the original post. Any idea on how to do it in this case?

balajisoundar Over a year ago

sry, i am not familiar with selectize.js.Can you give an example structure of options variable.

ACDSL Over a year ago

Sure, this is what it looks like (JSON):

{     "Attr1": {         "value": "Attr1",         "text": "Attr1"     },     "Attr2": {         "value": "Attr2",         "text": "Attr2"     } }

|

vidyasagar2012 · Accepted Answer · 2015-03-11 06:31:18Z

0

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

answered Mar 11, 2015 at 6:31

vidyasagar2012

256 bronze badges

1 Comment

ACDSL Over a year ago

Thank you. Please see my comment on the previous answer for a follow-up question.

Collectives™ on Stack Overflow

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

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related