在Node.js / Express.js中，如何将JSON对象从服务器传输到客户端？

In my server, I retrieve an object from the database and have it in a variable as follows:

在我的服务器中，我从数据库中检索一个对象并将其放在变量中，如下所示：

let files = [{"file1": "file1Data"}, {"file2": "file2Data"} ... ];

I want this data to be available in my client side JavaScript.

我希望这些数据可以在我的客户端JavaScript中使用。

One way to do this would be to set up an API to call within my JavaScript. My thinking is that this would cause an extra round trip. This is because there is one request to load the initial HTML/JavaScript and then a further request to load the JSON data.

一种方法是设置一个API以在我的JavaScript中调用。我的想法是，这将导致额外的往返。这是因为有一个请求加载初始HTML / JavaScript，然后是另一个加载JSON数据的请求。

Therefore, it would be faster to send the JavaScript to the client along with the initial request that loaded the page.

因此，将JavaScript与加载页面的初始请求一起发送到客户端会更快。

How can I send a JSON object directly from the server and have it available in my client side JavaScript?

如何直接从服务器发送JSON对象并在客户端JavaScript中使用它？

3 个解决方案

#1

I would use a templating engine such as EJS or Handlebars.

我会使用模板引擎，如EJS或Handlebars。

As an example, using EJS (http://ejs.co/) -

例如，使用EJS（http://ejs.co/） -

Server side:

服务器端：

// Set EJS as the view engine for Express
app.set('view engine', 'ejs');

// or just create a directory named 'views'
app.set('views', [
  path.join(__dirname, 'path/to/views'),
]);

app.get('/index', (req, res)=> {
  // 'index' must be in views dir
  return res.render('index', {
    // Pass in foo as the second argument
    // to res.render()
    foo: 'bar'
  });
})

index.ejs (EJS template):

index.ejs（EJS模板）：

<script>
  const foo = <%- JSON.stringify(foo) %>;
</script>

#2

Before serving the static files, you would need to fetch the object from the database and add the content to the files you're sending. So some kind of server-side processing. The Node app could read index.html from disk, parse it, find a place where to set the json data, and then send the data as response.

在提供静态文件之前，您需要从数据库中获取对象并将内容添加到您要发送的文件中。所以某种服务器端处理。 Node应用程序可以从磁盘读取index.html，解析它，找到设置json数据的位置，然后将数据作为响应发送。

I would not do it that way though. You're already making multiple requests, e.g., client asks for index.html. Server sends that file. Client then asks for all the resources like css, JavaScript, images, fonts, etc. Another little request for some json data won't hurt.

我不会那样做。您已经提出了多个请求，例如客户端要求index.html。服务器发送该文件。客户端然后要求所有资源，如CSS，JavaScript，图像，字体等。对一些json数据的另一个小请求不会受到伤害。

#3

As you said, API is the most common method if you retrieve the data from database (since you might do it after the website is loaded). If you retrieve the site when the user is requesting website, my method will be simply render it into the HTML that you serve to user.

正如您所说，如果您从数据库中检索数据，API是最常用的方法（因为您可能会在加载网站后执行此操作）。如果您在用户请求网站时检索该网站，我的方法只是将其呈现为您向用户提供的HTML。

I'm gonna show a simple sample here with pure app.write and app.get.

我将使用纯app.write和app.get在这里展示一个简单的示例。

app.get('/', (req, res)=> {
  res.write("<h1>Hi</h1>");
  res.write("<script>var data="+ObjectYouRetrieve+";</script>");
  res.end();
})

#1