zoukankan      html  css  js  c++  java
  • [Javascript] bukld 'SQL' like object tree

    Let's try creating a deeper tree structure. This time we have 4 separate arrays each containing lists, videos, boxarts, and bookmarks respectively. Each object has a parent id, indicating its parent. We want to build an array of list objects, each with a name and a videos array. The videos array will contain the video's id, title, bookmark time, and smallest boxart url. In other words we want to build the following structure:

    [
        {
            "name": "New Releases",
            "videos": [
                {
                    "id": 65432445,
                    "title": "The Chamber",
                    "time": 32432,
                    "boxart": "http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg"
                },
                {
                    "id": 675465,
                    "title": "Fracture",
                    "time": 3534543,
                    "boxart": "http://cdn-0.nflximg.com/images/2891/Fracture120.jpg"
                }
            ]
        },
        {
            "name": "Thrillers",
            "videos": [
                {
                    "id": 70111470,
                    "title": "Die Hard",
                    "time": 645243,
                    "boxart": "http://cdn-0.nflximg.com/images/2891/DieHard150.jpg"
                },
                {
                    "id": 654356453,
                    "title": "Bad Boys",
                    "time": 984934,
                    "boxart": "http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg"
                }
            ]
        }
    ]
      

    Note: please make sure when creating objects (both lists and videos) that you add properties in the same order as above. This doesn't impact the correctness of your code, but the verifier expects properties to be created in this order.

    function() {
        var lists = [
                {
                    "id": 5434364,
                    "name": "New Releases"
                },
                {
                    "id": 65456475,
                    name: "Thrillers"
                }
            ],
            videos = [
                {
                    "listId": 5434364,
                    "id": 65432445,
                    "title": "The Chamber"
                },
                {
                    "listId": 5434364,
                    "id": 675465,
                    "title": "Fracture"
                },
                {
                    "listId": 65456475,
                    "id": 70111470,
                    "title": "Die Hard"
                },
                {
                    "listId": 65456475,
                    "id": 654356453,
                    "title": "Bad Boys"
                }
            ],
            boxarts = [
                { videoId: 65432445,  130, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
                { videoId: 65432445,  200, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" },
                { videoId: 675465,  200, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
                { videoId: 675465,  120, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
                { videoId: 675465,  300, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
                { videoId: 70111470,  150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
                { videoId: 70111470,  200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" },
                { videoId: 654356453,  200, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
                { videoId: 654356453,  140, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys140.jpg" }
            ],
            bookmarks = [
                { videoId: 65432445, time: 32432 },
                { videoId: 675465, time: 3534543 },
                { videoId: 70111470, time: 645243 },
                { videoId: 654356453, time: 984934 }
            ];
    
        return lists.map(function(list) {
            return {
                name: list.name,
                videos:
                    videos.
                        filter(function(video) {
                            return video.listId === list.id;
                        }).
                        concatMap(function(video) {
                            return Array.zip(
                                bookmarks.filter(function(bookmark) {
                                    return bookmark.videoId === video.id;
                                }),
                                boxarts.filter(function(boxart) {
                                    return boxart.videoId === video.id;
                                }).
                                reduce(function(acc,curr) {
                                    return acc.width * acc.height < curr.width * curr.height ? acc : curr;
                                }),
                                function(bookmark, boxart) {
                                    return { id: video.id, title: video.title, time: bookmark.time, boxart: boxart.url };
                                });
                    })
            };
        });
    
    }
  • 相关阅读:
    linux 常用操作指令(随时更新)
    Spring @Scheduled应用解析
    H5的FormData对象完成ajax上传文件multiFile
    微服务的4个设计原则和19个解决方案
    微服务实战(六):如何做好服务拆分?
    微服务实战(五):微服务化之缓存的设计
    微服务实战(四):微服务化之无状态化与容器化
    微服务实战(三):以MySQL为例,从原理上理解那些所谓的数据库军规
    微服务实战(二):微服务的接入层设计与动静资源隔离
    微服务实战(一):微服务化的基石——持续集成
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5621702.html
Copyright © 2011-2022 走看看