Turn array in HTML data attribute into a Javascript array

Question

I need to pass this array into a function:

[
['ib-marker1', -24.9256,-43.8994, 0],
['ib-marker2', -22.9556,-43.8994, 0]
]

The array needs to be embedded in the HTML, so I added it like so:

<div id="map" data-markers="[['ib-marker1', -24.9256,-43.8994, 0],['ib-marker2', -22.9556,-43.8994, 0]]">

Then I take that info and call my function:

var markers = $(this).find("#map").data("markers"); init(markers);

This is a Google Maps function. No marker is recognized. I gather it is because my markers variable contains a string, not a real array. I just can't figure out how to do it.

As a test, I tried passing the array directly through the variable (not in the data attribute) and it worked fine:

var pins = [['ib-marker1', -24.9256,-43.8994, 0],['ib-marker2',
-22.9556,-43.8994, 0]];

Can someone please help me out? Thanks!

avoid eval() and try JSON.parse() on the data-markers content — source.rar
– source.rar, Commented May 27, 2014 at 18:31
An HTML attribute is a string. Your pins array is a javascript array, the are not the same. You need to write code to parse the string to create the array with the data you want in it. — geocodezip
– geocodezip, Commented May 27, 2014 at 18:34
JSON.parse didn't work, but eval did! Why should I avoid eval()? Anyway, if you post this on an actual answer, I´ll accept it. Thanks a lot guys! — Victoria Ruiz
– Victoria Ruiz, Commented May 27, 2014 at 18:35
If you can alter the syntax of your data parameter, such as replace the braces with a custom character that doesn't occur elsewhere, you could use split to make an array of your points as strings and then run array.forEach to further turn each element into a small nested array. — Zdenek
– Zdenek, Commented May 27, 2014 at 20:13

Victoria Ruiz · Accepted Answer · 2014-07-07 18:54:49Z

1

Considering nobody posted the right answer as an actual answer, I'm posting dfsq and Ayyash's answers here. This actually did the trick:

var markers = eval($(this).find("#map").data("markers"));

answered Jul 7, 2014 at 18:54

Victoria Ruiz

5,0233 gold badges25 silver badges43 bronze badges

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

2 Comments

Roko C. Buljan Over a year ago

eval-ing a user-accessible element data? A possible attack would be i.e: someone accessing or appending a #map and modifying the data-markers on your page. Injecting into data a malicious JS string. Your code will than process that JS. How cool is that?

Victoria Ruiz Over a year ago

It's a good point. What would you suggest doing instead? @RokoC.Buljan

Dr.Molle · Accepted Answer · 2014-05-27 22:48:20Z

0

You must use valid JSON(not an object-literal), then jQuery may parse the data correctly via .data("markers").

Valid JSON uses double-quotes to enclose strings(not single-quotes):

<div id="map" data-markers="[[&quot;ib-marker1&quot;,-24.9256,-43.8994,0],[&quot;ib-marker2&quot;,-22.9556,-43.8994,0]]"></div>

http://jsfiddle.net/cnG4b/ (take a look into the console)

edited May 27, 2014 at 22:48

answered May 27, 2014 at 22:39

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Collectives™ on Stack Overflow

Turn array in HTML data attribute into a Javascript array

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related