javascript - 使用map()，filter()和concatAll()函数提取Javascript数据

输出几乎是正确的，但是在拼合嵌套的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，标题，boxart:boxart图像尺寸为150x200的影片的网址

// [
//     {"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数组，但是我似乎找不到位置。

请点击here for demo

最佳答案

你很亲密我认为这是Observable的练习。因为您正在研究RxJS，所以重要的是您要而不是使用索引-> [0]。处理可观察对象时，没有索引的概念。

理解此问题的技巧是仔细查看concatAll()在做什么。它需要一个二维数组并返回一个展平的数组。
[[1,2],[3,4]] --> [1,2,3,4]
使用当前代码，您正在将boxartProp.url映射到嵌套数组，但是其余属性未映射。您现在或多或少拥有的是:[1,2,3,[4]]。您想要的是一个均匀嵌套的数组:[[1],[2],[3],[4]]。之所以重要，是因为concatAll()期望每个成员都是一个子数组。如果您还没有看过，我建议您看Jafar Husain的this video。他很棒，并从头开始在视频中实现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();

请注意，在最后一个 map 中，我们不仅传递了boxart网址，还传递了视频数据。这为我们提供了运行concatAll()所需的均匀嵌套的数组。

我们必须两次调用concatAll()的原因是，您的视频嵌套在演示的类别中。第一个调用使电影变平，第二个调用使类别变平。

Here is the modified jsbin for your review。

这些是需要进行的一些很棒的练习。祝好运!