How can I get `data-value` using jQuery?

Question

How can I get data-value country using jQuery? I need this in variable:

var country = ...;

HTML:

<a id="obj-details" data-value="{city:'berlin', street: 'mozart', postal_code: '55555', country: 'DE'}">test</a>

Find detailed explanation here: http://stackoverflow.com/questions/22753629/jquery-get-html-5-data-attributes-with-hyphens-and-case-sensitivity — Kiran, Jul 04 '14 at 08:53
@user3266909, please check my answer. this gives you country value as DE — Bhushan Kawadkar, Jul 04 '14 at 09:13

Bhushan Kawadkar · Accepted Answer · 2014-07-04T09:11:56.807

9

To read data-value attribute use below jQuery :

$("#obj-details").data('value');

and to read country from the data-value use below jQuery :

 var value = $("#obj-details").data('value');
 var obj = eval('(' +value + ')');

 var country = obj.country;
 alert(country );

Demo

edited Jul 04 '14 at 09:11

answered Jul 04 '14 at 08:53

Bhushan Kawadkar

28,279
5
35
57

score 4 · Answer 2 · answered Jul 04 '14 at 08:51

4

Use:

$("#obj-details").attr('data-value');

answered Jul 04 '14 at 08:51

Arunkumar

5,150
4
28
40

score 3 · Answer 3 · answered Jul 04 '14 at 08:51

3

$('#obj-details').data('value');

answered Jul 04 '14 at 08:51

Alien

3,658
1
16
33

Jaison James · Answer 4 · 2014-07-04T09:11:36.447

3

If you looking the return data as a object, try like below.

var country = eval('(' + $("#obj-details").attr('data-value') + ')');

alert(country.city);

edited Jul 04 '14 at 09:11

answered Jul 04 '14 at 08:56

Jaison James

4,414
4
42
54

Rajaprabhu Aravindasamy · Answer 5 · 2014-07-04T09:06:14.513

1

Try to use .data(key) to retrieve that value,

var obj = JSON.parse($("#obj-details").data('value')); //Entire object
var country = obj.country; //Country value

edited Jul 04 '14 at 09:06

answered Jul 04 '14 at 08:50

Rajaprabhu Aravindasamy

66,513
17
101
130

`alert(obj);` works fine but `alert(obj.country);`not. It displays `undefined` – user3266909 Jul 04 '14 at 09:04

score 0 · Answer 6 · answered Jul 04 '14 at 08:51

0

jquery.parseJSON(jquery("#obj-details").attr("data-value"));

answered Jul 04 '14 at 08:51

minam.cho

122
1
12

score 0 · Answer 7 · edited May 23 '17 at 10:32

Try object at data-* attribute utilizing double "" quotation marks.

html

<a id="obj-details" 
   data-value='{"city":"berlin"
                , "street": "mozart"
                , "postal_code": "55555"
                , "country": "DE"
               }'>test</a>

js

var obj = JSON.parse($("#obj-details")[0].dataset.value);
var country = obj.country;
$("#obj-details").text(country);

jsfiddle http://jsfiddle.net/guest271314/6LcfS/

See also How can you parse NON wellformed JSON (maybe using jQuery)

How can I get `data-value` using jQuery?

7 Answers7

Linked

Related