Получение массива String из узла js в ejs - PullRequest
Новая
       8

Получение массива String из узла js в ejs

0 голосов
/ 13 сентября 2018

Я пытаюсь выучить chart.js.Поэтому я пытался создать диаграмму для тестирования chart.js.

Все работало нормально, когда я определял метки непосредственно в данных chart.js.Но это не сработало, когда я пытался извлечь данные из mongodb, передать их в index.ejs, а затем подставить их вместо меток и данных в сценарии.

Кроме того, когда я заменил метку наОн напрямую работал с некоторыми метками (не теми, что получены от nodejs) и использовал данные, полученные от nodejs.(Примечание: страна имеет строковый тип, а значение имеет числовой тип в схеме).

Коды для 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
      });
    });
  });
});

index.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>

Вывод из браузера

1 Ответ

0 голосов
/ 15 сентября 2018

Я нашел, где я иду не так.

В index.ejs вместо этого ... 

labels: [<%= value %>],

Это должно быть ... 

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

В основном массив, который я получал из app.js, был вроде [abc, xyz, pqr]. Таким образом, чтобы преобразовать его в строковый массив типа ['abc', 'xyz', 'pqr'], мы должны использовать JSON.stringify ()

В любом случае, спасибо, ребята!

...