使用geofire和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方法內的函數完成。