时间戳

首页 > 解决方案 > 将字符串数组从节点 js 获取到 ejs

node.js - 将字符串数组从节点 js 获取到 ejs

问题描述

我正在尝试学习 chart.js。所以我试图制作一个图表来测试chart.js。

当我直接在 chart.js 数据中定义标签时，一切正常。但是当我尝试从 mongodb 检索数据，将其传递到index.ejs，然后将其替换为脚本中的标签和数据时，它不起作用。

此外，当我通过直接给出一些标签（不是从 nodejs 收到的标签）并使用从 nodejs 收到的数据来替换标签时，它起作用了。（注意：在Schema中国家是String类型，值是Number类型）。

app.js、index.ejs 的代码和输出如下。

谢谢！

app.js 代码：

app.get('/', async function (req, res) {

  var countryArr = [];
  var valuesArr = [];

  var getCountry = data.find({}).select('country -_id');
  var getValues = data.find({}).select('value -_id');

  getCountry.exec(function(err, x){
    for(var i = 0; i < x.length; i++){
      countryArr.push(x[i].country);
    }
    console.log(countryArr);
    getValues.exec(function(err, x){
      for(var i = 0; i < x.length; i++){
        valuesArr.push(x[i].value);
      }
      console.log(valuesArr);
      res.render('index',{
        country : countryArr,
        value : valuesArr
      });
    });
  });
});

索引.ejs

<body>
  <p>
    <%= country %>
  </p>
  <p>
    <%= value %>
  </p>
  <div class="container">
    <canvas id="myChart" style="width: 100px; height=100px"></canvas>
  </div>
  <script>
    var ctx = document.getElementById("myChart");
    console.log(country[0].toString());
    var myChart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: [<%= value %>],
        datasets: [{
          label: '#',
          data: [<%= value %>],
          backgroundColor: [
            'rgba(255, 99, 132, 0.2)',
            'rgba(54, 162, 235, 0.2)',
            'rgba(255, 206, 86, 0.2)',
            'rgba(75, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)',
            'rgba(255, 159, 64, 0.2)'
          ],
          borderColor: [
            'rgba(255,99,132,1)',
            'rgba(54, 162, 235, 1)',
            'rgba(255, 206, 86, 1)',
            'rgba(75, 192, 192, 1)',
            'rgba(153, 102, 255, 1)',
            'rgba(255, 159, 64, 1)'
          ],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero: true
            }
          }]
        }
      }
    });
  </script>
</body>

浏览器输出

标签： node.jsmongoosechart.jsejs

解决方案

我发现我哪里出错了。

在 index.ejs 中，而不是这个......

labels: [<%= value %>],

它应该是...

labels: <%- JSON.stringify(country)%>,

基本上我从 app.js 收到的数组是 [abc,xyz,pqr]。所以要将其转换为像 ['abc','xyz','pqr'] 这样的字符串数组，我们必须使用 JSON.stringify()

无论如何，谢谢各位！

推荐阅读