Question

Pretty noobish question, and I’m probably thinking about this wrong, but…

Is there a way to pass a javascript object (or a reference to it) to a javascript function within the HTML markup?

For example:

<script type="text/javascript">
    var myObject = new Object();
    $('body').append('<div onclick=testThis(' + myObject + ')></div>');

    function testThis(object)
    {
        console.log(object);
    }
</script>

The markup ends up looking something like this when I inspect it:

<div onclick="testThis([object Object])"> 

Additional context:

The real use case is a search page in which I am querying SOLR via AJAX and get a result back as JS objects. When the user clicks on the HTML markup representing one of these search results, I want to be able to pass the object(or a reference to it) to a separate JS function for processing.

Am I thinking about this the wrong way?

Answer 1

No, you can’t embed a reference to an object into markup.

Instead you probably would like to setup your click event listening in Javascript/jQuery:

var object = new Object();
$('<div/>').appendTo('body').click(function() {
    testThis(object);
});

function testThis(value) {
    console.log(value);
}