how to generate html with javascript method and object parameter

Question

I'm generating a link in my javascript

ex. <a href="#" onClick="openContactDetailPage('+JSON.stringify(contact)+')">'+ formattedName + '</a>

However, the quotes aren't escaped in the object so it doesn't really work.

The original link I had was :

<a href="#" onClick="openContactDetailPage('+contact+')">'+ formattedName + '</a><

This just shows the [Object] text not the actual object. I feel like there has to be an easy solution for this I just can't seem to find it.

UPDATE: fixed links to be less generic

Answer 1

You can do the following:

$(document).ready(function(){
    var contacts = {one:'John', two: 'Anne'};  
    for (var prop in contacts) {
        var $anchor = $('<a href=""></a>').text(prop)
        .click(function(e){
            e.preventDefault();
            method({hi:'hi'});
        });
        $('#contacts').append($anchor).append('<br/>');
    }
});

function method(myObject){

    var $response = $('#response');

    for (var prop in myObject) {
        $response.append(prop).append('<br/>');
    }
}

Check this jsfiddle

Answer 2

'<a href="#" onclick="methodName('+JSON.stringify(object)+');">Click here</a>'

As you are doing in javascript, it should be string. So you can do like this.

Try this Fiddle