Passing array from NodeJS server to client?

Question

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.

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;

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.

EDIT:: THE CODE IN HERE NOW IS WORKING FOR FUTURE USERS

JSON is an sting with the signature of {"key":"value"}. You should send your data in this style. — Heartbit
– Heartbit, Commented Apr 19, 2017 at 11:36

Heartbit · Accepted Answer · 2017-04-24 08:43:10Z

6

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

Update:

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;

edited Apr 24, 2017 at 8:43

answered Apr 19, 2017 at 11:42

Heartbit

1,8542 gold badges16 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ashton Spina Over a year ago

OK, so you're saying send it as an array within a JSON object? How would I build it in the javascript that way and then how would I extract it on the other side?

Heartbit Over a year ago

How do you get cityList inside map template?

Ashton Spina Over a year ago

So to update I used this answer to build my data server side and it worked. Then to pick it up client side I used: var cityList = <%- cityList %>; which for reasons I don't understand successfully puts the cityList in the var and nothing else does. If someone could explain why I need the ejs javascript indicators I would appreciate it.

mohan rathour · Accepted Answer · 2017-04-19 11:44:03Z

2

JSON.stringify the array (or any arbitrary JSON object really) on the server and then JSON.parse it on the client.

So you need to change the client side code little bit.Please try below code it's working for me.

server-side:

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

client-side:

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

answered Apr 19, 2017 at 11:44

mohan rathour

4302 silver badges12 bronze badges

2 Comments

Ashton Spina Over a year ago

I think this is exactly what I was doing and having issues with?

mohan rathour Over a year ago

There is a little bit difference in client-side code, You are parsing with out stringify but i am first converting it to string then parsing.

Collectives™ on Stack Overflow

Passing array from NodeJS server to client?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related