Question

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

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

2 个答案: