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!
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.
myDiv.objectA = variable;
_variable in the example because I don't know what exactly @marc-vilalta wants to store._variable didn't have special meaning and also that your downside isn't really such a downside since the OP's question doesn't indicate that the object reflects where it's going to go no matter what solution is used.
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 complete callback function of the ajax, passing the data from the results to the function (user variable would be the data)
Using https://api.jquery.com/prop/
yourObj = [];
//now fill your object with your data
$row = $("td.yourClass")
$row.prop("dataObj", yourObj );
