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 };
                                });
                    })
            };
        });
    
    }
  • 相关阅读:
    javaScript控制按钮可用/不可用
    查询信息时对数据进行分页显示
    css样式-记录没记住的样式
    js里cookie,localStorage的简单用法
    关于BaseServlet的使用
    Web项目运行时tomcat服务器启动失败
    关于form表单提交数据后不跳转页面+ajax接收返回值的处理
    网页的标题栏添加小图标
    memcache安装过程
    Got minus one from a read call
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5621702.html
Copyright © 2011-2022 走看看