How do I pass a variable to inline javascript using EJS templating engine?

I’ve created a html list of buttons/text from an array called items in an .EJS template. How do I pass the specific item’s id (item.id) to the button’s function so I can send the right data to my api? Thanks.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Menu</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript">

    function print(id) {
        $.ajax({
          url: "https://www.example.com/api/1/print",
          type: "POST",
          data: {
            "item_id": id
          },
          dataType: "json",
          success: function (result) {
            alert(result);
          },
          error: function (xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
          }
        });
      };
    </script>
  </head>
  <body>
    <h2>Menu</h2>
    <ul>
        <% for(item of items) { %>
          <li>
            <button onclick="print(item.id)">PRINT</button>
            <%= item.name %> - <%= item.id %>
          </li>
        <% } %>
    </ul>
  </body>
</html>

Contents hide

Answers:

Method 1

Method 2

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

<button onclick="print('<%= item.id %>')">PRINT</button>

is how you would do it in every templating language I have used. After looking at the docs, it appears EJS is the same

Method 2

<button onclick="print('<%= item.id %>')">PRINT</button>

wrap your variable up with the template tags, within a single quotes

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating