Angular Leaflet Marker Loop via Factory Object Issue

Question

I'm setting up the angular-leaflet-directive and trying to get my markers to load, but they aren't coming through the loop. However, when I log the array to the console, it comes up. Is there something I am missing? Should I push each i as an object? Here is the plunkr

Please be patient. I'm learning. Long time lurker, first time poster. I just can't wrap my head around this. Here is what i got:

var myapp = angular.module('myApp', ['leaflet-directive']);


myapp.controller('PredictionCtrl',
    function($http, $scope, ProductData, $timeout) {
        $scope.productData = ProductData;
        var markers = {};
        var i = 0;
        angular.forEach($scope.productData.products, function(product) {
            markers[i++]={
               lat: product.location.lat,
               lng: product.location.lng,
               message: "aaaa",
               focus: false,
               draggable: false
           };

           $scope.markers = markers;
        });
        angular.extend($scope, {
            vegas: {
                lat: 36.167583, 
                  lng: -115.141892,
                  zoom:  14
            }
        });
    });


myapp.factory('ProductData', function() {
var products = [ 
    {       pID : 1,
        p_name : "Pawn Stars Tour",
        location: {
          address : {
            street: "713 S Las Vegas Blvd",
            street2 : "",
            city : "Las Vegas",
            zip : 89101,
            country : "USA"
          },
          lat : 36.1616821,
          lng : -115.1474645,
        },          
        phone : "+1 702-385-7912"
      },
//product 2
      {
          pID: 2,
          p_name : "Sunset Grand Canyon Helicopter Tour",
          rank_init : 0.99999998,
          location : {
            address : {
              street : "5596 Haven St",
              street2 : "",
              city : "Las Vegas",
              zip : 89119,
              country : "USA"
            },
            district : "Downtown",
            lat : 36.0880348,
            lng : -115.1667809
          },
          phone : "+1 702-736-0606"
        },
//product3
        {
          pID: 3,
          p_name : "Dream Racing Experience",
          location : {
            address : {
              street : "Las Vegas Motor Speedway",
              street2 : "7000 N Las Vegas Blvd",
              city : "Las Vegas",
              zip : 89115,
              country : "USA"
            },
            district : "North Las Vegas",
            lat : 36.2728959,
            lng : -115.0110197
          },
          phone : "+1 702-599-5199"
  }];
  return products;
});

Here is it not working.

https://plnkr.co/edit/nOtI9WLbIsjm5Y8tvkU0?p=preview I based it off this: http://plnkr.co/edit/evaQpqGZUz39Y7MNqbo7?p=preview

Thanks in Advance

Answer 1

Couple of things, $scope.productData holds the array you want to iterate, not $scope.productData.products. Also, you can use an array to add the marker objects to, not an object and immediately attach it to scope. $scope.markers = []. That way you won't have to increment a key etc. Here's the updated controller:

myapp.controller('PredictionCtrl', [
            '$http', '$scope', 'ProductData',
    function($http,   $scope,   ProductData) {
        $scope.productData = ProductData;
        $scope.markers = [];
        angular.forEach($scope.productData, function(product) {
            $scope.markers.push({
                lat: product.location.lat,
                lng: product.location.lng,
                message: "aaaa",
                focus: false,
                draggable: false
            });
        });
        angular.extend($scope, {
            vegas: {
                lat: 36.175,
                lng: -115.136389,
                zoom:  10
            }
        });
    }
]);

And a working example on Plunker: https://plnkr.co/edit/O6pAPwRG9v7D1zReAdZL?p=preview