jQuery get JSON from attribute

Question

I have saved JSON in a HTML object attribute like this:

<div data-json='[[30,"https:\/\/www.google.de\/",true],[41,null,null],[42,null,null],[15,null,null]]'>

When i now want to access that via jQuery it fails:

jQuery.parseJSON( jQuery('div').attr( 'data-json' ) );

It seems like the attr method is adding additional backslashes that causes this problem.

Any ideas?

EDIT: Sorry guys the problem isn't that what i've pointed out here. So this question is obsolete. Thanks for your answers.

not an answer to your solution, but would it be better to render that JSON as a javascript variable rather then in an html attribute? — Mike
– Mike, Commented Apr 28, 2017 at 8:11

Icewine · Accepted Answer · 2017-04-28 08:27:23Z

2

I didn't really change anything and it worked just fine. Not sure what your problem was exactly. Maybe the way it was accessed or something else on the page messing it up.

var data = jQuery.parseJSON(
    $('div').attr('data-json')
    );
  
$("#contents").append(data[0][0]);
$("#contents").append("<br>");
$("#contents").append(data[0][1]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<div data-json='
  [
    [30,"https:\/\/www.google.de\/",true],
    [41,null,null],
    [42,null,null],
    [15,null,null]
  ]
'>

<div id="contents"></div>

edited Apr 28, 2017 at 8:27

answered Apr 28, 2017 at 8:19

Icewine

1,8511 gold badge13 silver badges22 bronze badges

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

1 Comment

GDY Over a year ago

Thanks for answering. The problem lies in a other part of the code so this one actually works. My fault ._.

Dmitry Chirkin · Accepted Answer · 2017-04-28 08:13:16Z

-1

Try to use $('div').data('json') instead of .attr

answered Apr 28, 2017 at 8:13

Dmitry Chirkin

1,08410 silver badges23 bronze badges

5 Comments

guradio Over a year ago

why not attr()?why data()?

GDY Over a year ago

Didn't now that you can access this with .data() ... i thought this was a completely own jquery kind of api for storing information related to objects. Anyway data returns exactly the same output than attr. So this doesn't work ... Im within wordpress so its a pretty old jquery version. Maybe thats the problem.

Dmitry Chirkin Over a year ago

I think it's somehow related to html5 data attributes but I'm not sure; Also, you don't have to JSON.parse() if you are using .data, isn't this enough to use more convenient method?

guradio Over a year ago

can you supply info on you don't have to JSON.parse() if you are using .data,

Dmitry Chirkin Over a year ago

I've just tried this in browser console. Not sure it's mentioned somewhere in the docs

Collectives™ on Stack Overflow

jQuery get JSON from attribute

2 Answers 2

1 Comment

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related