javascript - 如何从 ejs 将 JSON 数组对象传递给函数

Question

我们有一个 Node.js 应用程序，当用户点击某个路由时，将从 api(后端)获取 JSON 数组，并将其作为数组对象传递到我的 EJS 模板。

在 EJS 模板中，我有一个按钮，单击该按钮会调用一个 Javascript 函数，该函数对 JSON 数组对象进行一些计算，并将计算值显示在 html DIV 元素上。我不知道如何将 JSON 数组对象从 ejs 模板发送到 javascript 函数。我在 stackoverflow 中看到了类似的问题，但我没有看到任何正确的解决方案

将 JSON 数组对象从 Node js 路由器传递到 ejs 模板的代码如下所示。这里'data'是使用res.render()发送到ejs文件(gallery.ejs)的JSON数组对象

app.get(“/getBill”, function(req, res) {


   bill(locationID,tableID, (error, billdata) => {
            if (error) {
                return console.log(error)
                res.render("error")
            }
            else {

                var data=billdata
                res.render("gallery",{data:billdata})
            }
        })


});

我可以访问 ejs 文件 (gallery.ejs) 中的 JSON 数组对象“data”，并迭代它并访问 JSON 数组中的元素。

<% data.forEach(item => {%>
<div class="row ">
  <div class="col-lg-8 col-sm-8">
    <%=item.name%>
  </div>
  <div class="col-lg-4 col-sm-4 text-sm-right">
    $<%=item.price/100%>
  </div>

</div>
<%});%>

但是我需要通过单击按钮将 ejs 文件中的 JSON 数组对象“数据”传递给函数(见下文)。我的目标是访问函数 myFunction 内的 JSON 数组对象“数据”。

<button type="button" id="zeroperc" class="btn btn-outline-primary" onclick="myFunction()">0%</button>

如何将 JSON 数组对象“data”从 ejs 模板传递到函数 myFunction ()？

Answer 1

只需使用 ejs 将data 添加到函数参数即可:

<button type="button" id="zeroperc" class="btn btn-outline-primary"
onclick="myFunction(<%=data%>)">0%</button>

此外，假设 data 实际上是 json，您可能需要从 myFunction 调用 JSON.parse(data)，然后才能访问它的属性。

更新

试试这个:

<script type="text/javascript">
var data = <%=data%>;
</script>

<button type="button" id="zeroperc" class="btn btn-outline-primary"
onclick="myFunction(data)">0%</button>