在 Javascript 中使用 Jade Array 将其转换为字符串

Question

我正在将一组对象传递到我的 jade 模板，并想在我的 js 中将其用作 var。

好像传输正确了，因为

each level, i in stats
    .levelStats

创建 4 个 div（如预期的那样）

现在我有

script(type='text/javascript').
  var statData = "!{stats}"

据我所知，应该将数据加载到 javascript 变量中。它以某种方式做到了...

console.log(statData);
// output: [object Object],[object Object],[object Object],[object Object]
// this means the correct data must be there..somewhere

console.log(typeof statData);
// output: string

我做错了什么？我怎样才能将整个数组放入 var 中？

解决方案+教训：

var foo = "!{bar}" 将数据变成字符串（回溯起来很明显）

正确的方法：var foo = !{bar}

Answer 1

each level, i in stats
    .levelStats

您正在循环（一个数组？）stats，其中 i 是一个索引，level 是您数组中位于 stats[i] 的元素。

但你似乎没有单独使用这些元素:
var statData = "!{stats}"

stats 仍然是数组，您会在 level !

中找到每个元素

编辑 :
澄清后，保留整个数组并将其设置为变量：

var statData = !{JSON.stringify(stats)}

Answer 2

您需要在 <script> 标签中放置一个字符串。如何将数组变成字符串，以便以后可以将其转换回来？ JSON.stringify.

所以，像这样的东西应该可以工作：

script.
  var statData = !{JSON.stringify(stats)};

Answer 3

我花了一整天让它工作。这是更高级的示例，但是我们在 jade/pug 文件中将数组传递给 js。这里我们将位置数组传递给 google 地图初始化脚本。像这样使用它： 1)在服务器上准备数据

JSON.stringify(locations = [
        { lat: -31.563910, lng: 147.154312 },
        { lat: -33.718234, lng: 150.363181 },
        { lat: 52.319277, lng: 21.000466 }
        ])

2) 将其传递到您的 pug/jade 页面。在那里，将它与您传递的变量一起使用，例如：DATA_THAT_YOUPASS

script.
                 function initMap() {
                 var map = new google.maps.Map(document.getElementById('map'), {
                 zoom: 3,
                 center: {lat: 52.5191758, lng: 23.0002262}
                 });
                 // Create an array of alphabetical characters used to label the markers.
                 var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                 // Add some markers to the map.
                 // Note: The code uses the JavaScript Array.prototype.map() method to
                 // create an array of markers based on a given "locations" array.
                 // The map() method here has nothing to do with the Google Maps API.
                 var markers = locations.map(function(location, i) {
                 return new google.maps.Marker({
                 position: location,
                 label: labels[i % labels.length]
                 });
                 });
                 // Add a marker clusterer to manage the markers.
                 var markerCluster = new MarkerClusterer(map, markers,
                 {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
                 }
                 var mydata = !{DATA_THAT_YOUPASS}
                 console.log(mydata);
                 console.log(mydata);
                 var locations = mydata;
             #map
            script(src='https://unpkg.com/@google/markerclustererplus@4.0.1/dist/markerclustererplus.min.js')
            // Replace the value of the key parameter with your own API key.
            script(async='', defer='', src='https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXX&callback=initMap')

在 Javascript 中使用 Jade Array 将其转换为字符串

Using Jade Array in Javascript transforms it to a string

javascript

node.js

pug

解决方案+教训：