从NodeJS服务器传递数组到客户端？

Question

学习自己创建一个网站。我之前只有一个对象存在这个问题，但是我能够使它工作并在客户端获取对象并使用它。但是，现在我试图向客户端发送一个位置数组，以便将它们呈现在Google Maps API上作为标记（它们具有存储在JSON中的placeIDs）。根据我读过的线程不能像对象那样发送数组，但是我遵循其他人建议的无效方法。我有一些测试位置，我做了一个数组，但是当我尝试在客户端捡起它时，我只是得到“SyntaxError：缺少：属性ID后”和“ReferenceError：cityList未定义”，这使得感觉cityList是否有问题。

服务器：

var express = require('express'); 
var router = express.Router(); 

/* GET users listing. */ 
router.get('/', function(req, res) { 
    var yourCities = ["stockholm", "moscow", "barcelona", "bordeaux", "helsinki", "london"]; 
    var cityList = yourCities.reduce(function(cityList, city) { 
     cityList.push(require('../public/cityData/' + city)) 
     return cityList; 
    }, []) 

    //TODO::need to update this to send an array 
    res.render('map', { 
     cityList : JSON.stringify(cityList), 
    }); 
}); 

module.exports = router; 

试图让cityList客户方并使其成为标记，标记代码基本上是直接从谷歌的API指南复制。

<script> 
     var cityList = <%- cityList %>; 
    </script> 
    <script> 
    function initMap() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 41.9028, lng: 12.4964}, 
     zoom: 3 
     }); 

     var infowindow = new google.maps.InfoWindow(); 
     var service = new google.maps.places.PlacesService(map); 
     for(i = 0; i < cityList.length; ++i) 
     { 
     service.getDetails({ 
      placeId: cityList[i].placeID 
     }, function(place, status) { 
      if (status === google.maps.places.PlacesServiceStatus.OK) { 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: place.geometry.location 
      }); 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + 
       'Place ID: ' + place.place_id + '<br>' + 
       place.formatted_address + '</div>'); 
       infowindow.open(map, this); 
      }); 
      } 
     }); 
     } 
    } 
    </script> 

很明显，我稍后会将标记放置到一个循环中，但现在我只是试图获得第一个测试元素。

编辑::这里是现在工作，未来的使用者

Answer 1

它的代码似乎用自己的方式将数据发送到ejs模板是正确的，它应该正常工作，以确保为波纹管日志的cityList第一项：

var cityList = <%= cityList %> 
 
console.log(cityList[0])

更新：

server

var express = require('express'); 
 
var router = express.Router(); 
 

 
/* GET users listing. */ 
 
router.get('/', function(req, res) { 
 
    var yourCities = ["stockholm", "moscow", "barcelona", "bordeaux", "helsinki", "london"]; 
 
    var cityList = yourCities.reduce(function(cityList, city) { 
 
     cityList.push(require('../public/cityData/' + city)) 
 
     return cityList; 
 
    }, []) 
 

 
    //TODO::need to update this to send an array 
 
    res.render('map', { 
 
     cityList : JSON.stringify(cityList), 
 
    }); 
 
}); 
 

 
module.exports = router;

Answer 2

JSON.stringify阵列（或任意JSON对象真的）在服务器上，然后JSON.parse它在客户端上。

所以你需要改变客户端代码一点点。请尝试下面的代码它为我工作。

服务器端：

res.render('map', { 
    cityList : JSON.stringify(cityList), 
}); 

客户端：

var cityList = JSON.parse(!{JSON.stringify(cityList)});