Fetch array value - JQuery

Question

Consider that i have the following html

<input type="text" id="other_floor_plans" name="other_floor_plans[]" value="["Pool","Office","Sprinkler","Boiler"]">

To fetch the values i use

a = $('#other_floor_plans').val()

It returns the following

"["Pool","Office","Sprinkler","Boiler"]"

If i use a[0], it returns "[" as output. I need to get "Pool" as the first value.

How to accomplish this?

Answer 1

Your value is a type of string which has a correct JSON syntax. Just parse with JSON.parse into the array and use your syntax.

const value = '["Pool","Office","Sprinkler","Boiler"]';
const array = JSON.parse(value);
console.log(array[0]);

Answer 2

I think you need to change little bit of your code specially in markup.

changed your input markup into this <input type="text" id="other_floor_plans" name="other_floor_plans[]" value='["Pool","Office","Sprinkler","Boiler"]'>

then get value by jQuery

var a = $('#other_floor_plans').val(),
a = JSON.parse(a);
console.log(a[0]);

you need to use JSON.parse because you get json formate value and need to be parsed.

for my recommendation you just comma separate value like

<input type="text" id="other_floor_plans" name="other_floor_plans[]" value="Pool, Office, Sprinkler, Boiler">

then get first value by jQuery

var a = $('#other_floor_plans').val().split(",");
console.log(a[0]);

This one is much more readable and easy I guess.

Answer 3

You can use eval function to convert string to array and get the value.

var a = "['Pool','Office','Sprinkler','Boiler']"; // or you can also assign like this var a ='["Pool","Office","Sprinkler","Boiler"]' 
var firstItem = eval(a)[0];
console.log(firstItem); //output will be "Pool"

Answer 4

There you doing a wrong practice when you initialize value in input box you must contain a value in different quotation symbols. there you take " for value assign and " also for array string, that truncate your string on the second " that's why this return only [ in your value. Try to use like this:

HTML

<input type="text" id="other_floor_plans" name="other_floor_plans[]" value='["Pool","Office","Sprinkler","Boiler"]'>

JQuery

var a = $('#other_floor_plans').val();
a = JSON.parse(a);
console.log(a);