Pass object to html String

Question

I am in a situation here, i think its a simple one but i can't sort it out. I Have a HTML element where i should pass a json Object

code

var x = "<li id='tag_1'></li>"
var obj = {"name":"krishna","id":"krish1"}

when I convert this to html i want to get Like this

<li id="tag_1" data-options={obj}></li>

I tried $(x).data("options",{obj}), tried to pass as a string when creating the html element,but did'nt work

Thanks

JSON is a string, not an object, and also .data will not create data-options for you. Take a look at the jQuery spec of what it actually does. — Derek 朕會功夫
– Derek 朕會功夫, Commented Jan 23, 2015 at 9:57
{obj} is invalid syntax. You can simply use $(x).data('options', obj). It will, however, not be saved on the HTML tag but rather just in jQuery's memory. Example: $('body').data('foo', { foo: 'bar' }); $('body').data('foo'); gives Object {foo: "bar"}. — h2ooooooo
– h2ooooooo, Commented Jan 23, 2015 at 9:57

h2ooooooo · Accepted Answer · 2015-01-23 10:01:06Z

3

$(x).data("options",{obj}) is a perfectly good way to do it, provided you fix the syntax error. Just pass obj directly, and jQuery will save it as an object. It will not, however, be added as an attribute.

$(x).data("options",obj)

If you look at the documentation for .data() it specifies that your value doesn't have to be a string:

value
Type: Anything
The new data value; this can be any Javascript type except undefined.

edited Jan 23, 2015 at 10:01

h2ooooooo

39.6k8 gold badges70 silver badges107 bronze badges

answered Jan 23, 2015 at 9:58

Scimonster

33.4k10 gold badges79 silver badges92 bronze badges

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

5 Comments

Krishna Over a year ago

i did this fiddel but not woking,i tried to get the options to html but not working

Scimonster Over a year ago

"It will not, however, be added as an attribute." It's just saved in memory to be accessed by $(x).data('options'). Also, you're recreating the jQuery object when you append it. You need to save the same object.

h2ooooooo Over a year ago

@Krishna It works fine. Your problem was that when you do $('<tag>') you create a new element. You need to save the reference to this element and then use that (as you can see using my fiddle).

Krishna Over a year ago

So what change should i do in that fiddle... or what change in code should i do, to access that obj

h2ooooooo Over a year ago

@Krishna Did you see my link? Your answer is already there? Instead of $(x).foo(); $(x).abc(); then use var xx = $(x); xx.foo(); xx.abc();

llernestal · Accepted Answer · 2015-01-23 09:57:25Z

1

Try $(x).attr("data-options",JSON.stringify(obj))

If you don't want it printed in your HTML use $(x).data("options",obj)

answered Jan 23, 2015 at 9:57

llernestal

5662 silver badges8 bronze badges

1 Comment

Krishna Over a year ago

fiddle.jshell.net/Lt51nmkm

Collectives™ on Stack Overflow

Pass object to html String

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related