Cannot set property 'distanceFrom' of undefined

Question

Background: I'm using ng-repeat on a JSON result which allows to be to create a dynamic list with items like {{list.name}} and {{list.dates}}.

This JSON currently provides Lat/Lng which I pull out and format into a google distance matrix API call to return the distance between the Lat/Lng of the item on the list and the user device.

The distance API call returns correctly, but I can't seem to display this data in the same rows at the other JSON data. Here is my code: JS

$cordovaGeolocation.getCurrentPosition(options).then(
    function(position){
        $scope.startingLat = position.coords.latitude;
        $scope.startingLng = position.coords.longitude;
        services.projectStreets().then(function(result){
                $scope.projects = result.data;

                for (var i = 0; i < $scope.projects.length; i++) {
                    var endingLat = $scope.projects[i].position.lat;
                    var endingLng = $scope.projects[i].position.lng;
                    // this works to add key and value-> $scope.projects[i].distanceNew = "hi" + i;
                    services.googleMapsDistance($scope.startingLat, $scope.startingLng, endingLat, endingLng)
                        .then(function(distances){
                            $scope.distanceAway = distances.data;
                            $scope.projects[i]['distanceFrom'] = $scope.distanceAway.rows[0].elements[0].distance.text;

                            }
                        );
                }

            });
      }

    )

HTML

<ion-item ng-repeat="project in projects" ng-click="goDeetz({{project.Nid}})">
  <div class="row">
    <div class="col-9">
        {{project.title}}<br>
     <a>{{project.project_dates}}</a>
    </div>
  <div class="col-3">
     {{distanceAway.rows[0].elements[0].distance.text}}
  </div>
</div>
</ion-item>

I'm sure I'm missing something simple.

Cannot set property 'distanceFrom' of undefined

0 Answers0