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

Question

学习自己制作网站。 我以前只有一个对象遇到过这个问题，但是我可以使其工作并在客户端使用该对象。 但是，现在我正尝试将一系列位置发送给客户端，以便将它们作为标记呈现在google maps api上（它们在JSON中存储了placeID）。 根据我曾经读过的线程，不能像对象一样发送数组，但是我遵循了其他人的建议，但无济于事。 我已经做了一些测试位置的数组，但是当我尝试在客户端将其拾取时，我得到的是“ 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客户端并将其放入标记中，基本上从Google的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的第一项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)} );