使用脚本标签时使用 ejs答案

【问题标题】：Working with ejs when using the script tag使用脚本标签时使用 ejs
【发布时间】：2020-05-27 14:26:36
【问题描述】：

我在 Node.js/Express + PostgreSQL 和 ejs 中工作。

我想插入标签脚本。我从数据库查询中得到的结果。

我试图做这样的事情：

var vPlayer = `<%-JSON.stringify(avg.mark)%>`;
console.log(vPlayer);

或者这个：

const div = document.createElement('div');
div.innerText = `<%=avg.mark %>`
console.log(div);

但它不起作用。我要绘制图表的完整代码

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<% avg_t.rows.forEach(function(avg){%>
  <script type="text/javascript">
    var vPlayer = `<%-JSON.stringify(avg.mark)%>`;
    console.log(vPlayer);

    const div = document.createElement('div');
    div.innerText = `<%=avg.mark %>`
    console.log(div);

    google.charts.load('current', {
      'packages': ['corechart']
    });
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', vPlayer],
        ['Mu112', div],
        ['Onions', 1],
      ]);
      var barchart_options = {
        title: 'Barchart: How Much Pizza I Ate Last 
        Night ',width:400,height:300,legend: '
        none '};
        var barchart = new google.visualization.BarChart(document.getElementById('barchart_div'));
        barchart.draw(data, barchart_options);
      }
  </script>
<%} ) %>

【问题讨论】：

您不认为应该将avg_t.rows 分配给js 变量并在脚本标签内循环遍历它。此外，我认为将其作为字符串 <%-JSON.stringify(avg.mark)%> 传递存在问题，您应该对其进行解析，然后在此处传递该 js 对象 ['Mushrooms', vPlayer]
@Ele 你能给我看一个小例子吗？我真的需要它，但我自己想不通......
@Ele 抱歉再次写信。我只是真的需要它。我自己不知道如何解决这个问题....

标签： javascript sql node.js express ejs

【解决方案1】：

有两行我根本看不懂，但你是这段代码的所有者：

['Mushrooms', vPlayer /*I don't understand this*/],
['Mu112', div/*I don't understand this*/],

新方法：

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
  let rows = JSON.parse('<%= JSON.stringify(avg_t.rows) %>');
  let players = [];

  rows.forEach(function(avg, i) {
    players.push(avg.mark);

    let div = document.createElement('div');
    div.innerText = avg.mark; //I don't know 
    div.setAttribute("id", `barchart_div${i}`);
    /*You should append this new div into a specific element*/
  });

  google.charts.load('current', {
    'packages': ['corechart']
  });

  function drawChart() {
    players.forEach(function(vPlayer, i) {
      let div = document.getElementById(`barchart_div${i}`);
      let data = new google.visualization.DataTable();
      data.addColumn('string', 'Topping');
      data.addColumn('number', 'Slices');
      data.addRows([
        ['Mushrooms', vPlayer /*I don't understand this*/],
        ['Mu112', div/*I don't understand this*/],
        ['Onions', 1],
      ]);
      var barchart_options = {
        title: 'Barchart: How Much Pizza I Ate Last Night ',
        width: 400,
        height: 300,
        legend: 'none'
      };
      var barchart = new google.visualization.BarChart(div);
      barchart.draw(data, barchart_options);
    });
  }

  google.charts.setOnLoadCallback(drawChart);
</script>

【讨论】：