Passing object as a parameter in a template literal in javascript

Question

I currently have an object which I want to pass as a parameter to another function inside a template literal:

    var template = `<button onclick="onclick(${object})"></button>`;

However, this makes the parameter become a string value: [object Object] and doesn't pass the parameter. Is there any way to pass this parameter into the function?

Thank you very much in advance.

Answer 1

You are going to need to represent your object as a string. You can do this using JSON.stringify :

var template = `<button onclick="handleClick(${JSON.stringify(obj).split('"').join("&quot;")})"></button>`;

You will need to escape double quotes (which this code does), and single quotes if used for your onclick event (this code doesn't).

onclick="onclick" actually calls window.onclick - meaning that it picks up clicks anywhere. You should use a different name (such as handleClick).

I would suggest refraining from using inline event listeners for reasons like this, and because they can cause issues if you ever need to adopt a content-security-policy.