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

问题描述

学会独自制作网站。我以前只有一个对象遇到过这个问题，但是我可以使其工作并在客户端使用该对象。但是，现在，我正在尝试将一系列位置发送给客户端，以便将它们作为标记呈现在google maps api上（它们在JSON中存储了placeID）。根据我曾经读过的主题，不能发送像对象这样的数组，但是我遵循了其他人的建议，但没有用。我已经对数组进行了一些测试，但是当我尝试在客户端进行提取时，我只会看到 SyntaxError：缺少：属性ID之后和 ReferenceError：未定义cityList，

Learning to make a webiste on my own. I had this issue before with a single object, but I was able to make it work and pick up the object on the client side and use it. But, now I'm trying to send an array of locations to the client in order to render them on the google maps api as markers (they have placeIDs stored in the JSON). According to the threads I've read once cannot send an array like an object, but I followed what some others suggested to no avail. I have some test locations I've made an array of, but when I try and pick it up on the client side I just get, "SyntaxError: missing : after property id" and "ReferenceError: cityList is not defined", which makes sense if the cityList is having issues.

服务器：

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指南。

Trying to get the cityList clientside and make it into markers, the marker code is basically copied straight from Google's API guide.

  <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>

很明显，我稍后将标记放置到一个循环中，但现在我只是想

Obviously, I'll later make marker placement into a loop but for now I'm just trying to get the first element for testing.

编辑：：现在的代码正在为将来的用户使用

: THE CODE IN HERE NOW IS WORKING FOR FUTURE USERS

推荐答案

您似乎可以将数据发送到 ejs 模板的方法是正确的，并且应该可以正常工作，请确保记录 cityList 如下：

It seems your way to sending data to ejs template is right and it should work fine, to be sure log the first item of cityList as bellow:

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

更新：

服务器

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;

这篇关于将数组从NodeJS服务器传递到客户端？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！