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

Question

我将一个对象数组传递给我的jade模板，并想将它作为 var 在我的js中。

似乎被正确地转移了，因为

each level, i in stats
    .levelStats

创建4个div（如预期

现在我有

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

据我所知，它应该将数据加载到一个javascript的var中。

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

我花了一整天的时间才把它做出来 这是一个更高级的例子，但我们在jadepug文件中把数组传给js。在这里，我们通过数组的位置到谷歌地图的初始脚本。用起来是这样的。1)准备服务器上的数据

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

2)把它传到你的pugjade页面。在那里，用这个与你传递的变量，例如。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/[email protected]/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')