使用map（），filter（）和concatAll（）函數提取Javascript數據

Question

輸出幾乎是正確的，但我無法展平嵌套的boxart數組。

Javascript數據：

var movieLists = {
    name: "Instant Queue",
    videos : [
        {    
             "id": 70111470,
             "title": "Die Hard",
             "boxarts": [
                 {width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg"}, 
                 {width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg"}
             ],
            "url": "http://api.netflix.com/catalog/titles/movies/70111470",
            "rating": 4.0,
            "bookmark": [{ id:432534, time:65876586 }]
        },
        {
            "id": 654356453,
            "title": ....,
        }];

預期輸出:(僅使用函數.map() .filter() .concatAll() ，返回id，title，boxart：具有boxart圖像尺寸150x200的電影的url

// [
//     {"id": 675465,"title": "Fracture","boxart":"http://cdn-0...." },
//     {"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0...." },
//     {"id": 654356453,...}
// ];

電流輸出：

// [                                    //boxart value is an array
//     {"id": 675465,"title": "Fracture","boxart":["http://cdn-0...."]},
//     {"id": 65432445,"title": "The Chamber","boxart":["http://cdn-0...."]},
//     {"id": 654356453,...}
// ];

我的解決方案

return movieLists.map(function (category) {
   return category.videos.map(function (video) {
       return {
           id: video.id,
           title: video.title,
           boxart: video.boxarts.filter(function (boxartFeature) {
               return boxartFeature.width === 150 && boxartFeature.height === 200;
           })
               .map(function (boxartProp) {
               return boxartProp.url;
           })
       };
   });
 }).concatAll(); //Flattens nested array by 1 dimension (please see demo)

我知道我需要應用.concatAll()函數來刪除嵌套的boxart數組，但我似乎無法找到所在的位置。

請點擊這里進行演示

Answer 1

你很近。 我認為這是Observables的練習。 因為您正在研究RxJS，所以不要使用索引 - > [0]是很重要的。 處理Observable時沒有索引的概念。

理解這個問題的訣竅是仔細研究concatAll()正在做什么。 它需要一個二維數組並返回一個扁平數組。

[[1,2],[3,4]] --> [1,2,3,4]

使用當前代碼，您將boxartProp.url映射到嵌套數組，但其余屬性不是。 你或多或少現在擁有的是： [1,2,3,[4]] 。 你想要的是一個均勻嵌套的數組： [[1],[2],[3],[4]] 。 之所以重要，是因為concatAll()希望每個成員都是一個子concatAll() 。 如果您還沒有看過，我建議您觀看Jafar Husain的這段視頻 。 他是驚人的，並在視頻中從頭開始實現concatAll 。

只需進行一些小的調整即可實現您的目標。

return movieLists.map(function(category) {
    return category.videos.map(function(video) {
        return video.boxarts.filter(function(boxart) {
            return boxart.width === 150;
        }).map(function(boxart) {
            return {id: video.id, title: video.title, boxart: boxart.url};
        });
    }).concatAll();
}).concatAll();

請注意，在最后一張地圖中，我們如何傳輸視頻數據，而不僅僅是映射boxart網址。 這為我們提供了運行concatAll()所需的均勻嵌套數組。

我們必須兩次調用concatAll()的原因是您的視頻嵌套在演示中的類別中。 第一個電話會使電影變得扁平，第二個電話會使這些類別變得扁平化。

這是修改后的jsbin供您查看 。

這些是一些很好的練習。 祝好運！

Answer 2

map返回一個數組。 您將map的結果存儲在boxart屬性中。

如果您不想在boxart存儲數組，只需存儲數組的第一個成員（索引0 ）：

//...
.map(function (boxartProp) {
     return boxartProp.url;
})[0]

Answer 3

就個人而言，我會使用forEach（）而不是map（）並將“正確”的boxart存儲在局部變量中。 請記住map（）返回一個數組。 通過使用forEach，我們可以檢查每個boxart並選擇正確的boxart。 我喜歡這個解決方案，因為閱讀代碼的其他人更容易理解正在發生的事情。 這也允許我們在鏈的末尾巧妙地使用concatAll（）。

return movieLists.map(function(category){                      

return  category.videos.map(function(vids){
    var correctBoxSize = "No Proper Box Size Found"; 

    vids.boxarts.forEach(function(boxes){
        if (boxes.width === 150 && boxes.height === 200)
            {correctBoxSize = boxes.url}
        });

    return {
            "id": vids.id,
            "title": vids.title,
            "boxart": correctBoxSize
           };
})
}).concatAll()