JSON Strings onclick function

Question

Good evening, I'm trying to send an encoded JSON via the onclick attribute.

Unfortunately this JSON contains articulated strings with many apostrophes and quotes. As you can well understand the JSON closes the quotes of the onclick attribute.

Edit 1

This is in a "return" of jquery DataTables loaded by ajax and the json is obviously different for item so i can't make an addEventListener (correct me if I'm wrong).

i need this getJsonObj() function to open a modal with all information inside

{data: null,
        render: function (data, type) {
          const json = JSON.stringify(data);
          console.log(json);
          return `<a onclick="event.preventDefault();getJsonObj(${json})"style='cursor: pointer' id='modalApp' class='orange-link uk-text-bold uk-text-uppercase'>${data.full_name}</a>`;
        },
}

This is the output:

Any ideas to be able to send it without problems?

Edit 2

Im not using any framework, only javascript, jquery, and Jquery datatables

Encode this json with https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent — Justinas, Oct 13 '20 at 18:03
I recommend using `addEventListener` instead of binding event handlers in HTML. — Heretic Monkey, Oct 13 '20 at 18:04
Are you sure this is jQuery? This looks more like React or Vue. — Edward Ellsworth, Oct 13 '20 at 18:04
Make a design where you do not have to do that! You should not have to stick the whole value in an attribute. Hard to give a solution without knowing the framework. — epascarello, Oct 13 '20 at 18:06
@EdwardEllsworth yes, is jquery datatable render function. to render the table cell as you want — C7 Lab, Oct 14 '20 at 07:23

score 1 · Accepted Answer · answered Oct 13 '20 at 18:05

1

You are putting a string into HTML so it needs to be HTML escaped. Specifically, in your case, the quotes from the JSON string are closing the quotes from the HTML onclick attribute. Use the function below and the quotes in your JSON will be replaced with "

function escapeHtml(unsafe) {
  return unsafe
    .replace(/&/g, "&amp;")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;")
    .replace(/"/g, "&quot;")
    .replace(/'/g, "&#039;");
}

<a onclick="event.preventDefault();getJsonObj(${escapeHtml(json)})"style='cursor: pointer' id='modalApp' class='orange-link uk-text-bold uk-text-uppercase'>${data.full_name}</a>

See Can I escape html special chars in javascript?

answered Oct 13 '20 at 18:05

Ruan Mendes

90,375
31
153
217

And for unescape how can i do it? – C7 Lab Oct 14 '20 at 07:33
You don't have to unescape it, just like you don't need to unescape characters you've escaped in a JS string such as `Hello\tWorld`. The JS engine will parse it and it will know that it means "Hello[tab]World", and the HTML parsing engine will know that ` – Ruan Mendes Oct 14 '20 at 12:13
Thanks, very helpful – C7 Lab Oct 14 '20 at 14:42

JSON Strings onclick function

Edit 1

Edit 2

1 Answers1