如何将Express响应对象传递给前端JS对象 [英] How to pass Express response object to frontend JS object

问题描述

我的控制器正在通过res.render将lat/lng数据发送到我的Handlebars视图.

My controller is sending lat/lng data to my Handlebars view via res.render.

res.render('coords', viewModel);

'viewModel'包含一个对象数组，每个对象都包含一个位置，lat和lng的名称.我想获取这些信息并在视图中在Google地图上绘制标记.当我尝试通过把手将数据注入到内联JS变量中时...

'viewModel' contains an array of objects, with each object containing a name of a location, lat, and lng. I want to take this information and plot markers on a Google map in my view. When I attempt to inject the data by way of Handlebars into an inline JS variable...

<script>
var viewMarkers = {{viewModel}};
console.log(viewMarkers);
</script>

我在控制台中找到了它...

I get this in my console...

<script>
var viewMarkers = [object Object],[object Object];
console.log(viewMarkers);
</script>

我只是Node/Express领域的新手，似乎无法理解如何将viewModel数据传递给前端的Google Maps JS.我的想法是，我需要执行AJAX请求才能访问数据.无论如何，我已经在Internet上进行了搜索，但是还没有遇到这样的示例，因此可以使用一些社区指导.

I'm only a beginner in the Node/Express realm and can't seem to comprehend how I can pass the viewModel data to the Google maps JS on the frontend. My thought is that I would need to do an AJAX request to access the data. Regardless, I've scoured the Internet, but have not come across an example of this yet and could use some community guidance.

我非常感谢您提供的知识/帮助.

I appreciate any knowledge/assistance.

推荐答案

您必须记住车把'工作是返回 Strings .小胡子标记{{}}将对象引用评估为字符串，以便可以将结果文本附加到DOM或HTTP响应正文中. <script>标记内的JavaScript直到到达客户端后才会执行. Handlebars无法返回对象引用，该引用可以在服务器端渲染后幸免并最终分配给客户端上的变量.

You must keep in mind that Handlebars' job is to return Strings. The mustache tags, {{}}, evaluate Object references as Strings so that the resultant text can be appended to the DOM or HTTP response body. The JavaScript inside your <script> tags does not get executed until it arrives on the client. There is no way for Handlebars to return an Object reference that could survive server-side rendering and eventually get assigned to a variable on the client.

[object Object],[object Object]是对两个对象组成的数组进行字符串化时的结果(即，它是在浏览器控制台中调用console.log(String([{}, {}]));的输出.

[object Object],[object Object] is the result when an Array of two Objects is stringified (ie., it is the output of calling console.log(String([{}, {}])); in your browser's console.

为了将JavaScript代码交付给客户端，您必须构造模板以返回带有有效JavaScript的字符串，其方式与典型模板返回有效HTML的方式相同.

In order to deliver JavaScript code to the client, you must construct your template to return a String with valid JavaScript in much the same way as a typical template returns valid HTML.

执行此操作的长途之路将如下所示:

The long way of doing this would be something like the following:

<script>
    var viewMarkers = [
        {{#each viewModel}}
            {
                location: '{{location}}',
                lat: {{lat}},
                lng: {{lng}}
            }
            {{#unless @last}},{{/unless}}
        {{/each}}
    ];
</script>

更简单的方法是让JSON.stringify完成对数组进行字符串化的工作:

The simpler way of achieving this would be to have JSON.stringify do the work of stringifying your Array:

res.render('coords', { viewModel: JSON.stringify(viewModel) });

然后呈现JavaScript，您只需在模板中执行以下操作即可:

Then to render the JavaScript you would need only do the following in your template:

var viewMarkers = {{{viewModel2}}};

请注意，为了避免引号 HTML转义，我们必须使用三重胡须处理程序栏.

Note that we must use triple mustaches in order not to have our quotes HTML-escaped by Handlerbars.

我创建了一个小提琴供您参考.

I have created a fiddle for your reference.

这篇关于如何将Express响应对象传递给前端JS对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！