Why won't .split() function work with vue.js 2?

Question

I'm building my first app with vue.js, but am at a loss for why my go-to JavaScript functions aren't working.

I'm importing a JSON file and trying to build a geojson object from it. To do so, I need to split its latlong string (eg latlon:"52.3723138,0.4903593" ) into an array of numbers like [52.3, 0.49] . String.split() seems like the obvious function to use, but it's not working in this environment.

The json file is of this structure:

{ affiliates: [  ] }

I'm passing the JSON affiliates array to the makeGeoJson function as the data argument.

Here's the code I'm trying:

makeGeoJson(data) {
  var geoJsonFeatures = [];
  data.forEach(function(gym) {
    var feature = {
      "type": "Feature",
      "properties": gym,
      "geometry": {
        "type": "Point",
        "coordinates": [parseFloat(gym.latlon.split(",")[0]), parseFloat(gym.latlon.split(",")[1])]
      }
    };
    geoJsonFeatures.push(feature);
  });
},

The error I get says

TypeError: Cannot read property 'split' of undefined
    at eval (eval at 50 (http://localhost:8080/0.9506ad4988fb1af5b77e.hot-update.js:7:1), <anonymous>:47:37)

I'm using Vue.js 2.2 and used the vue-cli to set it up.

Is this related to why I am also not able to push data to arrays in this same function?

Answer 1

It is likely that your data is not as you expect. I would put a console.log() check:

var geoJsonFeatures = [];
data.forEach(function(gym) {
    console.log(gym);
    var feature = {

Also, when you encounter an error like this, your script will not continue, so your push logic will not be reached.

Answer 2

TypeError: Cannot read property 'split' of undefined means that the property gym.latlon does not exist. It's not that split isn't working as expected or that split doesn't exist. That is exactly the reason you're not able to push the data. As soon as the error is thrown, it's going to propagate up the stack until it gets caught somewhere, so it's short circuiting your entire function.

// Error gets propagated to the caller of this function and beyond
// if you never handle it.
makeGeoJson(data) {
  var geoJsonFeatures = [];
  data.forEach(function(gym) {
    var feature = {
      "type": "Feature",
      "properties": gym,
      "geometry": {
        "type": "Point",
        // Throws here, so you get here once and never get past it.
        // gym.latlon does not exist. Double check property name and
        // object structure.
        "coordinates": [parseFloat(gym.latlon.split(",")[0]), parseFloat(gym.latlon.split(",")[1])]
      }
    };
    // You never get here.
    geoJsonFeatures.push(feature);
  });
},

As other people have pointed out, log gym and you will find that out is has no property latlon .

Also, another nice syntactic thing you can do to avoid splitting the string twice (once you have the object as you expect):

gym.latlon.split(",").map(function (point) {
  return parseFloat(point);
})