Wiederholen von Daten beim Durchschleifen von Arrays mit Geofire und Firebase

Question

Bitte sehen Sie sich meinen Code an.

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

    }); 
}) 

}

Innerhalb der Schleife gibt es zwei Linien von "console.log (Schlüssel)". Das erste console.log gibt eine genaue Darstellung der Daten aus, die eindeutige Schlüssel sind. Die zweite console.log-Datei druckt identische identische Daten, die ungenau sind. Ich habe Probleme zu verstehen, warum das passiert.

Vielen Dank für die Hilfe.

Answer 1

es ist ganz normal, dass ab dem zweiten console.log(key) haben Sie den gleichen Wert. Der Grund dafür ist Ihre Async-Funktion gf.get(key).then(function(location) { .. }. Wenn diese Funktion aufgerufen wird, ist Ihre Schleife beendet und der Wert key ist der letzte Wert aus Ihrer Schleife. Ich bin nicht sicher, was zu tun gf.get aber wenn posts ein Array ist, können Sie Ihr Ergebnis mit Hilfe von Rekursion erreichen, wie unten

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

gezeigt Hinweis: In diesem Ansatz, den wir für jeden warten versprechen, bevor gelöst werden bewegt zu Nächster Anruf von gf.get

Answer 2

Eine andere Technik, um das Problem zu beheben, ist die Verwendung eines IIFE-Verschlusses.

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

Durch eine IIFE Verwendung (Immediately Invoked Function Expression), um den Wert jedes key erhalten bleibt, bis die Funktion innerhalb des .then Verfahren abgeschlossen ist.