Как добавить элементы HTML div на основе информации со стороны сервера? - PullRequest
0 голосов
/ 28 октября 2019

У меня есть API, который возвращает новые данные каждые пару минут. Мне нужно автоматически создать новый div и добавить в него данные.

В настоящее время я могу отображать исходные данные в браузере. Но он должен добавлять новый div и новые данные под ним каждые пару минут.

app.js

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

let name, value, bodyData;

var options = { method: 'GET',
  url: 'https://api.example.com/data1',
  qs: 
   { 
     valueType: 'MAXIMUM'
   },
  headers: 
   { 
     authorization: 'ABC123456',
     accept: 'application/json; charset=utf-8' } };

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  bodyData1 = JSON.parse(body);
  name = bodyData.name;
  value = bodyData.value;

});

router.get('/', function(req, res, next) {
  res.render('home', {names: name, values : value});
});

module.exports = router;

app.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Items</title>
</head>
<body>
  <div class="itemsList">
    <h2>List of available items:  </h2>
        <div>Name: <%= names %> Value: <%= values %><div>
  </div>

  <script src="/scripts.js">
    //var newDiv = document.createElement("div");
    //newDiv.innerHTML = "Name: ${names} Value: ${values}";
    //document.body.appendChild(newDiv);
  </script>
</body>
</html>

scripts.js

var newDiv = document.createElement("div");
    newDiv.innerHTML = "Name: ${names} Value: ${values}";
    document.body.appendChild(newDiv);

1 Ответ

0 голосов
/ 28 октября 2019

Вы можете попробовать добавить код, который создает div внутри app.js

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  bodyData1 = JSON.parse(body);
  let name = bodyData.name;
  let value = bodyData.value;
  let newDiv = document.createElement("div");
    newDiv.innerHTML = "Name: ${names} Value: ${values}";
    document.body.appendChild(newDiv);

});
...