Pass object to javascript function from ejs

Question

I'm trying to attach a click event from my ejs file but I noticed that when my data coming from my database has a "newline", I get an error that says: Unexpected token in JSON at position 253

app.js

app.get('/', async (req, res) => {
   return res.render('page', {
      data: dataArray
   })
});

page.ejs:

  <% for(let t of data) { %>
  <tr class="tr-<%= t.id %>">
    <td><i class="fas fa-pencil-alt" onclick="editT('<%= JSON.stringify(t) %>')"></i>
    </td>
    <td><%= t.name %></td>
    <td><%= t.description %></td>
  </tr>
  <% } %>

script

function editT(t) {
  t = JSON.parse(t);
  console.log(t)
}

When a description has a "newline" and I use JSON.stringif(t) it comes broken:

let t = '{"id":1,"name":"Lorem","description":"Lorem Ipsum is simply dummy text of the printing and typesetting industry!

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
","created_at":"2022-04-18T22:19:00.153Z"}';


console.log(JSON.parse(treatment));

Answer 1

there two way of doing this without error

first one using <%- %> this way it will write the unescaped string

like this :

<td><i class="fas fa-pencil-alt" onclick="editT('<%- JSON.stringify(t)%>')"></i></td>

second one would be using encode

<td><i class="fas fa-pencil-alt" onclick="editT('<%= encodeURIComponent(JSON.stringify(t))%>')"></i></td>

the second one also requires you to do

function editT(t) {
  t = JSON.parse( decodeURIComponent(t));
  console.log(t)
}