Print a JavaScript array to HTML, square brackets and quotation marks intact

Question

I'd like to set the attribute of an input form with an array of values (to use for autocomplete search). I have a JS array that looks a little something like this:

var suggestions = ["value1", "value2", "value3"];

Using jQuery, I did this:

$("#search-input").attr("data-source", suggestions);

Desired output:

<input type='search' data-source='["value1", "value2", "value3"]' />

Actual output:

<input type='search' data-source='value1, value2, value3' />

This breaks the autocomplete as it requires an array (or at least something that looks like a JavaScript array).

Tomalak · Accepted Answer · 2012-03-26 11:46:13Z

3

Use

$("#search-input").data("source", suggestions);

because this

$("#search-input").attr("data-source", suggestions);

sets the attribute value (i.e., a string) of data-source to the result of suggestions.toString(), which of course is

"value1,value2,value3"

FWIW, this would be correct as well, even though needlessly complicated:

$("#search-input").attr("data-source", JSON.stringify(suggestions) );

edited Mar 26, 2012 at 11:46

answered Mar 26, 2012 at 11:17

Tomalak

340k68 gold badges547 silver badges635 bronze badges

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

Comments

antonjs · Accepted Answer · 2012-03-26 11:24:43Z

2

You can just use Split() method to create array

 suggestions.split(",");

 'value1, value2, value3'.split(","); // ["value1", " value2", " value3"]

answered Mar 26, 2012 at 11:24

antonjs

14.4k15 gold badges70 silver badges91 bronze badges

Comments

JiminP · Accepted Answer · 2012-03-26 11:17:32Z

1

One quick possible solution is

$("#search-input").attr("data-source", JSON.stringify(suggestions));

answered Mar 26, 2012 at 11:17

JiminP

2,1302 gold badges20 silver badges26 bronze badges

Collectives™ on Stack Overflow

Print a JavaScript array to HTML, square brackets and quotation marks intact

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related