In Javascript, how to access data from an array using PUG/Jade view?

Asked

Viewed 69 times

0

I’m using Express in Nodejs and I also use PUG (or old Jade) in views. In a view I display the data taken from a database on a graph. I already receive the data in array format. I created a small Javascript script to generate the graph.

DOUBT: How do I access this array data from within this Javascript as indicated in my code below? How I pass the data to Javascript?

view Pug.

doctype html
html
  head
    title= title
    meta("charset=utf-8")
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src="./javascripts/chartjs/Chart.js")
  body
    block content
        form.form-horizontal.well(method="post", action="/report")
            script
                include ../public/javascripts/chart-gen.js

Chart-gen.js: file I made a include just above:

    var dataValues = valoresDoBancoDeDados;  <<<==== dados vindos do banco de dados (array)
    var dataLabels = labelsDoBancoDeDados;   <<<==== dados vindos do banco de dados (array)

    var data = {
        labels: dataLabels, 
        datasets: [
            {
                label: "Quantidade de veículos",
                backgroundColor: 'rgb(132,199,200)', 
                data: dataValues 
            }    
        ]
    };

    var chrt = document.getElementById("canvas_chart").getContext("2d");
    var mChart = new Chart(chrt, {
       type: 'line',
       data: data
    });

HTML: ready should look like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <link rel="stylesheet" href="/stylesheets/style.css">
    <script src="./javascripts/chartjs/Chart.js"></script>
</head>
<body>
    <form class="form-horizontal well" method="post" action="/report">

      <div style="position: relative; height:320px; width:600px;">
        <canvas id="canvas_chart"></canvas>
      </div>

      <script>    
            var dataValues = valoresDoBancoDeDados;  <<<==== dados vindos do banco de dados (array)
            var dataLabels = labelsDoBancoDeDados;   <<<==== dados vindos do banco de dados (array)

            var data = {
                labels: dataLabels, 
                datasets: [
                    {
                        label: "Quantidade de veículos",
                        backgroundColor: 'rgb(132,199,200)', 
                        data: dataValues
                    }    
                ]
            };

            var chrt = document.getElementById("canvas_chart").getContext("2d");
            var mChart = new Chart(chrt, {
               type: 'line',
               data: data
            });
      </script>

    </form>
</body>
</html>
javascript node.js

1 answer

0

Correct form:

view Pug.

    script(type='text/javascript')
        | var dataValues = valoresDoBancoDeDados;
        | var dataLabels = labelsDoBancoDeDados;
        include ../public/javascripts/chart-gen.js

Browser other questions tagged javascript node.js

You are not signed in. Login or sign up in order to post.