如何使用express中的外部javascript文件中的数据

时间:2017-01-11 13:17:04

标签: javascript node.js express ejs

我正在创建使用node.js表达的应用程序,我希望从express传递一些数据并在外部javascript文件中使用。

这是我的app.js

const express=require('express');

const path=require('path');

const app=express();

const bodyParser=require('body-parser');

//configure app
 app.set('view engine','ejs');
 app.set('views',path.join(__dirname,'views'));

//use middleware
 app.use(express.static(path.join(__dirname, 'bower_components')));
 app.use(express.static(__dirname + '/public'));
 app.use(bodyParser.json()); 
 app.use(bodyParser.urlencoded({ extended: true }));

//define routes


var arrayData = [
    { id: 1, desc: "Nitesh" },
   {id:2,desc:"Raviaknt"}
]




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

      res.render('index', arrayData);

});




app.listen(800,function(){

    console.log('hi');

})

这是我的index.ejs文件

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css"/>
</head>
<body>

       <script src="demo.js"></script>

</body>
</html>

这是我最后一个demo.js文件

这里我如何使用传递快递

的arrayData

1 个答案:

答案 0 :(得分:2)

你必须把它放在JavaScript可以访问它的地方。 (外部的JavaScript并不是特别相关)。

目前,您将它传递给模板渲染器,然后忽略它。

通常,您应该将对象传递给模板渲染器,而不是数组,因此您需要更像这样的东西:

res.render('index', { myArray: arrayData });

然后如何访问它取决于您使用的确切模板引擎。

有几种方法可以将它注入页面。

  • 您可以创建可见数据,可能是通过生成包含关联行和数据单元格的表元素。
  • 您可以将其存储在<meta>元素或data-*属性中。
  • 您可以生成<script>元素并将其设为全局变量。

请注意,使用后两种方法,您最好将数据序列化为JSON字符串,或者这样做是非常难以使该技术发挥作用。

您还可以忘记将其注入页面并通过单独的URL将其提供,只需将其作为JSON输出即可。然后,您可以让客户端JavaScript使用XMLHttpRequest或fetch来请求它。