Convert a string of array into array javascript

Question

In my code i am reading a hidden input value which is actually a javascript array object

<input type="hidden" id="id_num" value="{{array_values}}">

But when i taking it using jquery ($('#id_num").val()) its a string of array,

"['item1','item2','item3']"

so i can not iterate it.How should i convert into javascript array object, so that i can iterate through items in the array?

• Bergi: Why is it a javascript array not a JSON array (which would be easy to parse)? What template engine fills in the {{array_values}}?
• Thomas: And why do you use a hidden input field to store JSON data?
• akhil viswam: djang templates@Bergi

Answer 1

You can use JSON.parse but first you need to replace all ' with " as ' are invalid delimitters in JSON strings.

var str = "['item1','item2','item3']";
str = str.replace(/'/g, '"');
var arr = JSON.parse(str);
console.log(arr);

Another approach:

Using slice and split like this:

var str = "['item1','item2','item3']";
var arr = str.slice(1, -1) // remove [ and ]
 .split(',') // this could cause trouble if the strings contain commas
 .map(s => s.slice(1, -1)); // remove ' and '
console.log(arr);

• RobG: Or just str.match(/\w+/g).
• ibrahim mahrir: @RobG But we don't know what in them (it could be "['some@email','5 + 3 = 7']")!
• RobG: I don't see your point. Validation of input and output is not part of the question or your answer (though obviously robust processing would include that, but not necessarily in the same function as the one doing the parsing).

Answer 2

You can use eval command to get values from string;

eval("[0,1,2]")

will return;

[0,1,2]

more details here

Though it should be noted, if this string value comes from users, they might inject code that would cause an issue for your structure, if this string value comes only from your logic, than it is alright to utilize eval

• ibrahim mahrir: eval is bad especially it is left for the user to type the string!
• bvrakvs: @ibrahimmahrir true, but since the code snippet OP has shared, has an hidden input, I'd assumed the variable comes from back-end. Otherwise you are 100% right.
• RobG: @ibrahimmahrir—users can already execute arbitrary code in their client. Some browsers make it extremely easy to hack the entire content of the page, inject user scripts and style sheets and run extensions and plugins. Though of course eval is to be avoided, but users executing arbitrary script in their browsers is not the reason. ;-)
• bvrakvs: @RobG What I don't understand is, the user can execute any command already, so why utilizing eval is an issue? Since user can execute {code} in their client, then why would eval({code}) would be an issue? As long as it is not calling anything from back-end?
• RobG: @bureaquete—exactly. The "eval is evil" mantra started because of the common bad practice of eval'ing strings that should have been plain code, not for security concerns. eval is just very inefficient and there is nearly always a better (more efficient, concise, maintainable) alternative.

Answer 3

var arr = "['item1','item2','item3']";
var res = arr.replace(/'/g, '"')
console.log(JSON.parse(res));

Answer 4

A possible way of solving this:

First, substr it to remove the [..]s.

Next, remove internal quotes, since we would be getting extra when we string.split

Finally, split with ,.

let mystring = "['item1','item2','item3']";
let arr = mystring.substr(1, mystring.length - 2)
 .replace(/'/g, "")
 .split(",")
console.log(arr)