Extracting json out of data attribute with jquery

Question

Im trying to get data out of a data attribute using jquery.

Heres what I have:

<div id="x" data-foo="{top:'100', left:'40', width:'50'}">

and in javascript:

x = $('#x').data();

console.log( x.foo.top ) //undefined

Ive tried JSON parse as well, but I get errors about unexpected tokens then.

`data.foo` is a string. It doesn't automatically know that the string value contains JSON content. — , Apr 03 '19 at 18:23

score 2 · Answer 1 · answered Apr 03 '19 at 18:25

2

You can get data with jQuery attr x = $('#x').attr('data-foo'); And then parse it to json like: var data = JSON.parse(x)

answered Apr 03 '19 at 18:25

Elyas Esna

`.data('foo')` gets the attribute value. No need for `attr`. – Apr 03 '19 at 18:26
Same issue. The challenge is to set the data in the attribute with the HTML. It did get me thinking about how the string was formatted though. I think I have the answer, one sec to confirm. – Jason Lough Apr 03 '19 at 18:30
Yep, if you format the string properly, you can use it as a JSON object, otherwise you get errors trying to parse or access the keys. Proper string in my eample would be (note the use of quotes): '{"top":"100", "left":"40", "width":"50"}' – Jason Lough Apr 03 '19 at 18:32

MD. ABDUL Halim · Accepted Answer · 2019-04-03T18:43:56.880

1

Please arrange your code like this

 <div id="x" data-foo='{"top":"100", "left":"40", "width":"50"}'> 

 In JSON, Key will be double quote.

edited Apr 03 '19 at 18:43

answered Apr 03 '19 at 18:30

MD. ABDUL Halim

@JasonLough Please go to the link and test it. https://jsfiddle.net/ahscse/gvu48Lqc/ – MD. ABDUL Halim Apr 03 '19 at 18:42
@JasonLough If this is the answer, click the checkmark to accept it. See https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work – Apr 03 '19 at 18:45
As this question has been downvoted most likely because of suggesting to use single instead of double quotes: [both are legit](https://stackoverflow.com/questions/2373074/single-vs-double-quotes-vs). I would recommend to stick to either single or double quote and use `"` inside your `data-foo` value, otherwise this may be a cause of problems if someone else has to maintain your code. – SaschaM78 Apr 03 '19 at 18:50
@JasonLough you can click Check mark (it will be selected) but not up or down Key – MD. ABDUL Halim Apr 03 '19 at 18:50

user2993497 · Answer 3 · 2019-04-03T18:38:43.360

What you have in data-foo is the string for a Javascript Object Literal and not JSON

Firstly, you need your JSON formatted properly. See below.

<div id="x" data-foo='{"top":"100", "left":"40", "width":"50"}'></div>

3 Answers3