API NODEJS: Как отобразить .pug и одновременно отправить ответ AJAX? - PullRequest
Новая
       20

API NODEJS: Как отобразить .pug и одновременно отправить ответ AJAX?

0 голосов
/ 20 ноября 2018

Я пытаюсь динамически обновить график Chart.js данными, поступающими с веб-сервера по запросу fetch(), например, 

res.send({myData: data});

Проблема: res.send() удаляет шаблон мопса в браузере. Каков наилучший способ заполнить диаграмму ответом fetch() при отображении шаблона на экране?

index.js - NODE API 

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function(req, res, next) {

  res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
  if(req.body.name) {
    console.log(req.body.name);
    data = [100, 200, 150, 100];
  } else {
    data = [0, 0, 0, 0];
  }

  res.send({myData: data});
  // res.render('index', { graph_data: data });

});



module.exports = router;

myscript.js - клиентский скрипт с ajax-запросом 

// make an ajax fetch request to the server for graph data and populate it.
document.getElementById("form").addEventListener("submit", function(event) {

    // get for inputs to send to server
    let name = document.getElementById("form-name").value;
    console.log("fetch...");

    // event.defaultPrevented();    
    // give endpoint, and create a request to send
    fetch("/", {
        method: 'POST',
        headers: new Headers(),
        body: JSON.stringify({ name: name})
    }).then(function(response) {
            console.log("response returned..")
            return response.json();
        }).then(function(myJson) {
            console.log("populated data.")
            populateGraph(myJson);
    });

});

console.log("populated data.")



var ctx = document.getElementById("myChart");

function populateGraph(myJson) {
    var myChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
            datasets: [{
                label: '# of Votes',
                data: [0, 0, 0],
                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: {
            responsive:true,
            scales: {
                yAxes: [{
                    ticks: {
                        beginAtZero:true
                    }
                }]
            }
        }
    });

    myChart.data.datasets[0].data.push(myJson.myData);
    myChart.update();


}

Есть идеи, как сделать эту работу?

Ответы [ 2 ]

0 голосов
/ 20 ноября 2018

Вы можете либо иметь две отдельные конечные точки бэкенда для JSON и обычные шаблоны, либо отправить заголовок «Content-type»: «application / json» на своей стороне клиента fetch, а затем проверить этот заголовок на сервере. код стороны Если заголовок присутствует, вы можете ответить res.json() вместо res.send()

0 голосов
/ 20 ноября 2018

Я не вижу код, который фактически обрабатывается сервером, но если ваша форма содержит атрибут действия, вам нужно запретить его поведение по умолчанию при отправке.Для этого измените обратный вызов слушателя события submit: 

document.getElementById("form").addEventListener("submit", function(event) {
    event.preventDefault(); // don't execute default browser's behaviour

    // rest of your code goes here
});

Теперь может быть несколько причин, по которым ваша диаграмма не обновляется.Для начала, вместо использования res.send () в API вашего узла, используйте res.json () - так ваш сервер будет отправлять данные в формате json.Кроме того, я бы переместил эту строку ... 

var ctx = document.getElementById("myChart");

... в функцию populateGraph, чтобы сделать ее самодостаточной.

Наконец, имейте в виду, что при использовании 

myChart.data.datasets[0].data.push(myJson.myData);

Вы фактически добавляете значения в массив данных набора данных.Таким образом, значения для меток на вашем графике будут: 

Red: 0
Blue: 0
Yellow: 0
Green: 100
Purple: 200
Orange: 150

Последнее число (100) не будет присвоено ни одной метке.

В примечании стороны POST-запрос должен использоваться дляотправлять данные на сервер, а не получать их.Я знаю, что вы, вероятно, просто экспериментируете с Express, но когда вы разрабатываете API, он должен служить данным в ответ на запрос GET.

В будущем хорошей идеей будет оставить сервер, отрисовывающий страницу, и API отдельно.

...