Passing An Array of Values To Jquery

Question

I have a button like so:

<button id='abc' value=['fred', 26]></button>

I want to know how I can access those two values via JQuery's .val() function.

I have tried $("#abc").val()[0] but that just appears to give me the first character which is the bracket "[".

I would like .val()[0] to instead give me the value "Fred".

• T.J. Crowder: You really want a button that displays "['fred', 26]" to the user? Perhaps you want to use data-values='["fred", 26]' (note that I've also fixed the invalid HTML).

Answer 1

Your HTML is invalid. You should try;

<button id='abc' value="['fred', 26]"></button>

However, you should look at using valid JSON notation, to enable you to parse the data as an array. JSON requires double quotes for strings (rather than single '), so you should end up with;

<button id='abc' value='["fred", 26]'></button>

If you were to access $('#abc').val() directly now, you'd retrieve the string ["fred", 26]. To retrieve this data as an array, you should parse the data using jQuery.parseJSON();

var array = jQuery.parseJSON($('#abs').val());
for (var i=0;i<array.length;i++) {
 alert(array[i]);
};

• T.J. Crowder: #Matt: Fair enough. :-) We all have our things.

Answer 2

Matt's suggestion is good (and he's right that your HTML is invalid).

Another approach, since the element has an ID, is to store the values separately, in your JavaScript rather than in the markup. Since IDs are unique on the page by definition, you could have:

<script>
var elementValues = {};
elementValues.abc = ['fred', 26];
</script>

...and then where you want to use it, if you know the ID (in your code you do, you're using it to find the element via $("#abc")):

var values = elementValues.abc;

...or in an event handler where you don't necessarily know the ID in the code, assuming this is the element in question (as it is in event handlers in jQuery):

var values = elementValues[this.id];

Answer 3

You can use eval

<button id="abc" value='["fred",26]'></button>
var values = eval($("#abc").val());
values[0]
values[1]

It will return array of values

Answer 4

Fix correct JSON format using " insted of ':

<button id="abc" value='["fred",26]'></button>

Parse the string:

$.parseJSON( $('#abc').val() )[0];

or

var abc = $.parseJSON( $('#abc').val() );
abc[0];