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

Question

学习自己制作网站。我之前在使用单个对象时遇到过这个问题，但我能够让它工作并在客户端拿起对象并使用它。但是，现在我正在尝试向客户端发送一组位置，以便在 google maps api 上将它们呈现为标记（它们具有存储在 JSON 中的 placeID）。根据我读过的线程，不能像对象一样发送数组，但我遵循了其他一些人的建议，但无济于事。我有一些测试位置，我已经创建了一个数组，但是当我尝试在客户端拿起它时，我只得到“SyntaxError：missing : after property id”和“ReferenceError：cityList is not defined”，这使得感知 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 的第一项记录如下：

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)} );