使用geofire和firebase循环遍历数组时重复数据(Repeating data when looping through array using geofire and firebase)

使用geofire和firebase循环遍历数组时重复数据(Repeating data when looping through array using geofire and firebase)

请看一下我的代码。

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（key）”。 第一个console.log打印数据的准确表示，这是唯一键。 第二个console.log打印重复相同的数据，这是不准确的。 我无法理解为什么会这样。

非常感谢帮忙。

Please take a look at my code.

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

}

Within the loop there are two lines of "console.log(key)". The first console.log prints an accurate representation of the data which is unique keys. The second console.log prints repeating identical data, which is inaccurate. I'm having trouble understanding why this is happening.

Thanks so much for the help.

最满意答案

从第二个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); });

注意：在这种方法中，我们等待每个promise得到解决，然后再转到gf.get下一个调用

it is quite normal that from second console.log(key) onward you have same value. The reason for that is your async function gf.get(key).then(function(location) { .. }. By the time this function is called your loop has finished execution and the value of key is the last value from your loop. I am not sure what gf.get do but if posts is an array you can achieve your result with help of recursion as shown below

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

Note: In this approach we wait for each promise to be resolved before moving to next call of gf.get