Best way to assign a javascript object to html element - Stack Overflow

admin管理员组

文章数量:1279145

I'm getting a javascript object via ajax. I need to attach this object to a div in order to be recovered later, for example, on a click event.

If instead of an object I had a variable I would push it into the html tags like this:

'<div variable="'+value+'"></div>';

And I would recover its value like this:

var value= $(this).attr('variable')

Could you suggest me a good approach to do that with objects?

Thank you very much!

I'm getting a javascript object via ajax. I need to attach this object to a div in order to be recovered later, for example, on a click event.

If instead of an object I had a variable I would push it into the html tags like this:

'<div variable="'+value+'"></div>';

And I would recover its value like this:

var value= $(this).attr('variable')

Could you suggest me a good approach to do that with objects?

Thank you very much!

• javascript
• html
• object

Share Improve this question Follow edited Feb 1, 2015 at 22:05 Deduplicator 45.7k77 gold badges7272 silver badges123123 bronze badges asked Mar 23, 2014 at 12:31 Marc VilaltaMarc Vilalta 5311 gold badge11 silver badge88 bronze badges 2

• Is it really required to attach it to the html div? Can't you store in variable or use localstorage? – sushil Commented Mar 23, 2014 at 12:34
• Why don't you just store it to a global variable for later? Will you not know which variable to retrieve from later? Is the json object related directly to the div you are attaching it to? This is really an odd approach without more details. – Anthony Commented Mar 23, 2014 at 12:50

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

The easiest way is to do this:

<div id="myDiv">...</div>

In javascript

var myDiv = document.getElmentById('myDiv');
myDiv._variable = variable;

You can recover this later if you want, simply using the same myDiv variable, or, again, with document.getElementById() or any other DOM method that returns the element.

var variable = myDiv._variable;

The downside of doing it this way is that you can't specify, in the server, or from the markup, which object you want to attach to the element.

If use JQuery you could use the data storrage functionallity

See data documentation of JQuery

//To store value or obj:
$("#myDivId").data("myKey", valueVar);
//Later to load:
var fetchValue = $("#myDivId").data("myKey");

Using a template engine would be the best approach, dividing logic from view, and that way you can parse full object properties to an html.

in this example i use jQuery & UnderscoreJs template engine.

javascript part:

 $(document).ready(function(){
     var user = { name:"Ofer", age:"29" }

     var markup = _.template($("#userTemplate").html(), user);
     $('#userContainer').html(markup);
});

html part(goes inside body)

<div id="userContainer">
</div>

<script id="userTemplate" type="text/template">
<fieldset>
 <legend>User</legend>
 Name: <%= name %><br>
 Age: <%= age %> <br>
 </fieldset>
</script>

The function _.template($("#userTemplate").html(), user); can be called from within the plete callback function of the ajax, passing the data from the results to the function (user variable would be the data)

Using https://api.jquery./prop/

yourObj = [];

//now fill your object with your data

$row = $("td.yourClass")

$row.prop("dataObj", yourObj );

本文标签： Best way to assign a javascript object to html elementStack Overflow