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

Using Jade Array in Javascript transforms it to a string

本文关键字：转换 字符串 Array Jade Javascript      更新时间：2023-09-26

我正在向我的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}

each level, i in stats
    .levelStats

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

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

仍然统计数组，您将在level中找到每个元素！

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

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

您需要在<script>标记中放入一个字符串。如何将数组制作成字符串，以便稍后将其转换回？JSON.stringify.

所以，像这样的东西应该起作用：

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

我花了一整天的时间让它发挥作用。这是一个更高级的例子，但我们在jade/pug文件中将数组传递给js。在这里，我们将位置数组传递给googlemapsinit脚本。这样使用：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')
相关文章：