Повторение данных при прохождении через массив с использованием геофирмы и firebase

Question

Пожалуйста, взгляните на мой код.

var posts = PostsData.getPosts(); 
    var postFunc = function(key) { 
     return posts[key]; 
    } 

    $scope.$watch($scope.active, function() { 
     $timeout(function() { 
    var markers = []; 

    for (var key in posts) { 

      console.log(key); 
      var p = gf.get(key).then(function(location) { 
      var post = postFunc(key); 
      console.log(key); 
      return ({ 
      idKey: key, 
      title: post.title, 
      coords: { 
       latitude: location[0], 
       longitude: location[1] 
      } 
      }); 
     }); 
     markers.push(p); 

    } 

    $q.all(markers).then(function(markers) { 
    $scope.markers = markers; 
    }); 

    }); 
}) 

}

В цикле есть две строки "console.log (ключ)". Первый console.log печатает точное представление данных, которые являются уникальными ключами. Второй console.log печатает повторяющиеся идентичные данные, что является неточным. Мне трудно понять, почему это происходит.

Большое спасибо за помощь.

Answer 1

вполне нормально, что со второго console.log(key) вперед вы имеете такое же значение. Причиной этого является ваша асинхронная функция gf.get(key).then(function(location) { .. }. К тому времени, когда эта функция называется, ваш цикл завершил выполнение, и значение key - последнее значение из вашей петли. Я не уверен, что gf.get делать, но если posts массив вы можете добиться результата с помощью рекурсии, как показано ниже

var posts = PostsData.getPosts(); 
var postFunc = function(key) { 
    return posts[key]; 
} 

var markers = []; 
var getMarkers(key) { 

    if (key > posts.length - 1) { 

     // promise resolved for each item in posts 
     $q.all(markers).then(function(markers) { 
      $scope.markers = markers; 
     } 

     return; 
    } 

    console.log(key); 
    gf.get(key).then(function(location) { 
     var post = postFunc(key); 
     console.log(key); 
     markers.push({ 
      idKey: key, 
      title: post.title, 
      coords: { 
       latitude: location[0], 
       longitude: location[1] 
      } 
     }); 

     getMarkers(++key); 
    }); 
} 

$scope.$watch($scope.active, function() { 
    markers = []; 
    getMarkers(0); 
}); 

Примечания: При таком подходе мы ждем каждый обещает быть решено, прежде чем перейти к следующий звонок gf.get

Answer 2

Другой способ устранения проблемы - использовать закрытие IIFE.

var markers = []; 

for (var key in posts) { 
    //IIFE closure 
    (function (key) { 
     console.log(key); 
     var p = gf.get(key).then(function(location) { 
      var post = postFunc(key); 
      console.log(key); 
      return ({ 
       idKey: key, 
       title: post.title, 
       coords: { 
        latitude: location[0], 
        longitude: location[1] 
       } 
      }); 
     }); 
     markers.push(p); 
    })(key); 
} 

При использовании IIFE (Immediately Invoked Function Expression) значения каждого key сохраняется до тех пор, функция внутри метода .then не завершится.