Not able to Parse HTML data attribute value as Javascript Object

Question

I have the JS and HTML Code as below

var a=$("li").data("item");
console.log($("li").data("item").type);

  <li  data-item="{&quot;contentId&quot; : 5,&quot;type&quot; : &quot;PROGRAM&quot;, section_type:  &quot;PROGRAM_SECTION&quot;, &quot;active&quot;:&quot;false&quot;  }">data</li>

Trying to get the JS Object's type property value in the data-item attribute using the code

var a=$("li").data("item");
console.log($("li").data("item").type);

But I got var a=$("li").data("item"); as string, even JSON.parse(a) also not working see the screenshot and codepen http://codepen.io/shmdhussain/pen/VvXKLr

Please help me in parse the data. Thanks in advance for any help.

Blue · Accepted Answer · 2015-10-25 08:17:03Z

1

OK, so I found a few things wrong:

1: It should be

$("li").data("sna-item");

Also, you have an error in your data-sna-item (It's not valid json). There are no quotes around section_type

Here's an updated codepen: http://codepen.io/anon/pen/gaewrd

answered Oct 25, 2015 at 8:17

Blue

23k7 gold badges69 silver badges102 bronze badges

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

2 Comments

Mohamed Hussain Over a year ago

Thanks FrankerZ for spotting the mistake.

Bastian Bräu Over a year ago

For better readability I'd write <li data-sna-item='{"contentId": 5, "type": "PROGRAM", "section_type": "PROGRAM_SECTION", "active": false}'>data</li> codepen.io/anon/pen/EVEgpv

vbranden · Accepted Answer · 2015-10-25 08:21:17Z

1

the problem is that your data is using " when it should be using " so you need to replace " with "

use this

JSON.parse($("li").data("item").replace(/&quot;/g,'"')).type;

assuming $("li").data("item") yields the data you wish to parse.

answered Oct 25, 2015 at 8:21

vbranden

6,0262 gold badges24 silver badges15 bronze badges

Comments

An0nC0d3r · Accepted Answer · 2015-10-25 08:32:48Z

1

Theres a few issues... try using the below HTML and JS instead.

HTML

<li data-item="{&quot;contentId&quot; : 5,
&quot;type&quot; : &quot;PROGRAM&quot;,
&quot;section_type&quot;:  &quot;PROGRAM_SECTION&quot;, 
&quot;active&quot; :&quot;false&quot;} ">data</li>

JS

var item = $("li").data("item");
var json = JSON.parse(item);    
$("li").text(json.type);

edited Oct 25, 2015 at 8:32

answered Oct 25, 2015 at 8:15

An0nC0d3r

1,29316 silver badges35 bronze badges

Collectives™ on Stack Overflow

Not able to Parse HTML data attribute value as Javascript Object

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related