如何把我的數據映射到與RxJS

Question

1.正確的格式怎麼回事

我有一些數據，我需要映射到正確的格式是什麼，我希望做 有用。我得到的數據也可以在長度上有所不同（也就是說，它可以是一個對象，或者10個或200個）的 。但是 - 我只關心該陣列中的前6個元素。當只有例如3個元素，那麼我 仍然要發出結果。但我不想在 的值沒有改變時發出變化（源可能會觸發更新，但數據 仍可能是相同的）。

I中的數據可能會看起來像這樣：

var data = { 
    myData: { 
    cats: [    // data I care about! 
     { 
     name: 'Mr. Cat', 
     someReallyLongPropertyNameThatLinksToAnImage: 'http://cat/ur/day.jpg', 
     ... // SOME MORE PROPS 
     }, 
     { 
     name: 'Supercat', 
     someReallyLongPropertyNameThatLinksToAnImage: 'http://cat/ur/day2.jpg', 
     ... // SOME MORE PROPS 
     }, 
     ... etc. 
    ] 
    }, 
    foo: {    // data I don't care about... 
    bar: [{...}...]  // data I don't care about... 
    }, 
    baz: { 
    butz: [{...}...] // data I don't care about... 
    } 
} 

我想應該是這樣的結果：

var result = [ 
    { 
    image: 'http://url/to/1', 
    title: 'title 1' 
    }, 
    { 
    image: 'http://url/to/2', 
    title: 'title 2' 
    }, 
    { 
    image: 'http://url/to/3', 
    title: 'title 3' 
    } 
] 

2.有什麼問題嗎？

我的問題是，我不知道如何：

• 發出與ñ項目（不發射每件）

  看起來bufferWithCount(6)一些變化我正在尋找的東西， ，但是當那個數組中只有3個元素時不起作用！

• 僅發射的改變時所得到的數組是不同

  當結果看起來完全以前一樣，然後不觸發 的變化事件。

3.我做了什麼（但不顯着工作）

Rx.Observable.of(data) 
    .map((e) => data.myStuff.cats) 
    .map((arr) => { 
    // this would emit a change for EACH element, right? ugh. 
    return Rx.Observable.fromArray(arr) 
     // only care about the first 6 elements? if it only 
     // has 3, would this still work? 
     .take(6) 
     // pluck out the props I need. (maybe not neccessary, but anyway) 
     .pluck('someReallyLongPropertyNameThatLinksToAnImage', 'name') 
     .map((el) => { 
     // map the data into the right format 
     return { 
      title: el.name 
      image: el.someReallyLongPropertyNameThatLinksToAnImage 
     } 
     }) 
    }) 
    .distinctUntilChanged() // yeah... this doesn't work either I guess.. 
    .subscribe(
    (result) => console.log(result) 
) 

Answer 1

我認爲這是可能比較容易只是使用的，而不是試圖破解其中Rx的解決方案的Array.prototype.slice方法。

至於使用distinctUntilChanged你需要使用一個比較器功能來告訴它如何將兩個數組我想象的比較：

Rx.Observable.just(data) 
    //Arrays slice will only take up to six items from the array 
    .map((e) => e.myData.cats.slice(0, 6)) 
    //Only updates if the array values have changed 
    .distinctUntilChanged(null, (cur, next) => /*Implement your array value comparison*/) 
    //Converts the values into something we can work with 
    .map((arr) => arr.map(el => { 
         return {name : el.name, 
           image : el.someBlahBlah}; 
       }) 
) 
    //Receives a series of arrays only if the values have changed. 
    .subscribe(); 

至於你會怎麼做的陣列相比那是另一回事完全和真的取決於你，但你可以看到這個答案here。

本質上不過，最簡單的解決辦法是通過陣列進行迭代，並檢查是否在對象的字段不同這裏從鏈路稍微修改後的代碼：

// attach the .equals method to Array's prototype to call it on any array 
Array.prototype.equals = function (array) { 
    // if the other array is a falsy value, return 
    if (!array) 
     return false; 

    // compare lengths - can save a lot of time 
    if (this.length != array.length) 
     return false; 

    for (var i = 0, l=this.length; i < l; i++) { 
     //Compare properties here, 
     //just make sure you are comparing value instances not references  
     if (this[i].name != array[i].name) { 
      // Warning - two different object instances will never be equal: {x:20} != {x:20} 
      return false; 
     }   
    }  
    return true; 
}