2017-07-18 8 views
0

Ich versuche nur neue "Google Map" Markers aus Datenbank abgerufen werden durch RxJS observables und jQuery $.ajax VerwendungRxJS Google Maps Marker

Ich erhalte eine Reihe von Markierungen alle 5 Sekunden. Wenn die Daten innerhalb des Arrays geändert wurden, d. H. Neue Marker angehängt, muss ich nur neue Marker herausfiltern.

var oldArray = [["ObjA",3455,643523,2],["ObjB",5346,2134,1],["ObjC",5341,7135,0]]; 
var newArray = [["ObjA",3455,643523,2],["ObjD",2384,4791,3],["ObjB",5346,2134,1],["ObjC",5341,7135,0],["ObjF",2631,7228,4]]; 

Also hier aus newArray brauche ich ["ObjD",2384,4791,3] und ["ObjF",2631,7228,4]

ich keine Ahnung haben, um herauszufiltern, wie es getan werden kann, und kann es gar RxJS durch die Verwendung nur durchgeführt werden.

Ich würde wirklich schätzen, wenn jemand mich in die richtige Richtung führen könnte!

var observable = Rx.Observable 
    .interval(5000) 
    .flatMap(function() { 
    return Rx.Observable 
     .from($.ajax({url: "https://somedomain.com/json"}).promise()) 
    }) 
    .filter(x => !!x === true) 
    .distinctUntilChanged(); 


observable.subscribe((response) => { 
     var newMarker = $.parseJSON(response.data);      
}); 
+0

Können Sie einen Ausschnitt von dem, was Sie versucht haben und wo Sie stecken geblieben sind, veröffentlichen? – paulpdaniels

+0

@paulpdaniels, Vielen Dank für Ihre Antwort. Ich schätze es sehr. Ich habe meine Frage mit dem Code-Snippet aktualisiert. Ich habe versucht, diese Aufgabe auf viele verschiedene Arten zu erfüllen, aber ohne Erfolg. Dies ist der Code von meinem letzten Versuch. Bitte beurteile mich nicht streng, denn ich bin wirklich neu bei RxJS und versuche mein Bestes zu geben, um es schnell und richtig zu bekommen. Danke nochmal! –

+0

Also ist der Teil, an dem Sie stecken bleiben, was zu tun ist, sobald Sie die Daten vom Server zurück haben? – paulpdaniels

Antwort

1

Für auf Arrays arbeiten, müssen Sie nicht RxJS benötigen, können Sie die neuen Array Operatoren in ES6 verwenden:

onlyNewArray = 
    newArray 
     .filter(newItem => 
      !oldArray.some(oldItem => oldItem[0] === newItem[0])); 

some() werden die Elemente im Array einzeln durchgehen und wenn alle erfüllen die Kriterien, die es wahr zurückgibt. Hier prüfen wir, ob jedes der Elemente in newArray in der alt ist, und wenn sie nicht enthalten sie in onlyNewArray


aktualisieren

Dies wird überprüfen, ob alle Elemente in oldItem sind gleich den entsprechenden Punkt in newItem:

onlyNewArray = 
    newArray 
     .filter(newItem => 
      !oldArray.some(oldItem => 
       oldItem.every((prop, index) => 
        prop === newItem[index]))); 

Update 2

Um nur einen konsekutiven Teil des Arrays zu überprüfen, können Sie es zuerst in Scheiben schneiden kann:

onlyNewArray = 
    newArray 
     .filter(newItem => 
      !oldArray.some(oldItem => 
       oldItem 
        .slice(0,3) 
        .every((prop, index) => 
         prop === newItem[index]))); 

Alternativ Sie einen Index eine einfache if/else-Klausel überspringen und dann zur Verfügung stellen kann:

let dontCheck = 1; 

onlyNewArray = 
    newArray 
     .filter(newItem => 
      !oldArray.some(oldItem => 
       oldItem.every((prop, index) => { 
        if(index == dontCheck){ 
         return true; 
        } else { 
         prop === newItem[index] 
        } 
       }))); 
+0

Vielen Dank! Das funktioniert wirklich wie erwartet. Sagen Sie mir bitte, ist es möglich, nach allen Elementen im Array zu filtern? Hier filtern wir zuerst, aber zum Beispiel, wenn ich alle Elemente im Array oder nur bestimmte Elemente vergleichen muss? Sorry, wenn ich zu viel frage. Danke im Voraus! –

+0

Vielen Dank Jon! Könnten Sie bitte auch beraten, wie Sie nach bestimmten Array-Elementen filtern können. ["ObjA", 3455,643523,2] Zum Beispiel muss ich nach 0,1,2 filtern, aber Element 3 wird übersprungen und nicht berücksichtigt. Danke! Oder durch 0,2,3 und überspringen 1. –

+1

Ich habe meine Antwort mit zwei Möglichkeiten aktualisiert. Ich würde empfehlen, die Operatoren in den Mozilla-Dokumenten nachzulesen: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array –