How to store javascript object or JSON in html element usiing html5 data attribute?

Question

I have anchor element.I want to store and retrive the object in it like this way.

<a  id ="test" data-val="{key1:val1,key1:val1}"> </a>

If I save in this way,while fetching it

$("#test").data('val') it gives me string like

"{key1:val1,key1:val1}".

But I am unable to parse it to json or javascript object again. I have tried using $.parseJSON(),JSON.parse(). But it throwing an error.

How we can achive it without localstorage or sessionstorage o cookie

EDIT :

After calling $("#test").data('val')

I am getting string like this

"{'category_slug' : 'featured','tip_slug':'tip-with-all-cats'}"

If i have use $.parseJSON()or JSON.parse() it throwing an error

Uncaught SyntaxError: Unexpected token

Note that once you've corrected the format to valid JSON (as pointed out below) jQuery will automatically parse it for you when placing it in the internal data cache, so you don't need to call JSON.parse() on it. See this example: jsfiddle.net/cxznLctj — Rory McCrossan
– Rory McCrossan, Commented Mar 9, 2016 at 13:10

alex · Accepted Answer · 2016-03-09 13:06:14Z

4

That's because it's not valid JSON.

Valid JSON has quoted keys and uses double quotes to delimit strings. Your example doesn't meet these requirements.

answered Mar 9, 2016 at 13:06

alex

492k205 gold badges890 silver badges992 bronze badges

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

3 Comments

alex Over a year ago

@RIYAJKHAN My answer still stands. Use double quotes. And make sure your string ends with a }

Jai Over a year ago

@RIYAJKHAN single quotes are invalid in json object key.

RIYAJ KHAN Over a year ago

Thanks @alex. I got it

Halcyon · Accepted Answer · 2016-03-09 13:06:19Z

1

That is not valid JSON, specifically you're missing quotes:

{"key1":"val1","key1":"val1"}

answered Mar 9, 2016 at 13:06

Halcyon

57.7k10 gold badges93 silver badges131 bronze badges

1 Comment

Halcyon Over a year ago

That also looks invalid. You're missing at least a trailing } and the quotes are single quotes instead of double quotes (but the parser might accept it).

Collectives™ on Stack Overflow

How to store javascript object or JSON in html element usiing html5 data attribute?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related