[Vuejs]-Why won't .split() function work with vue.js 2?

by

0👍

✅

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

0👍

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.

Leave a comment