使用函数式编程将数据从多个对象数组映射到Javascript中的新对象

Question

I am trying to create an object that requires mapping data from four arrays included in a function. The goal is to accomplish the new map using functional programming. Thus, for example, the methods map, reduce, forEach, concat, and filter would be allowed as well as custom functions.

I have arrived at a non functional solution using for-loops, which I've included below. However, I get stuck on a purely functional approach.

The data set and data for the desired outcome can be viewed independently at http://jhusain.github.io/learnrx/ , though I've included the data below.

The objective is to re-map the data using functional programming so that it resembles the desired output (included below).

I would appreciate help re-mapping the data using a functional approach and starting from the data shown below.

The exact text of the problem states:

Exercise 26: Converting from Arrays to Deeper Trees

Let's try creating a deeper tree structure. This time we have 4 seperate 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:

The desired output is:

[
    {
        "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"
            }
        ]
    }
]

The function that serves as the starting point follows below.

I've named the function "combine" so that we can call it. Also, I've included my solution, made up of for-loops, at the end of the function after the bookmarks array. My attempt at a functional solution only got this far:

return lists.map(function(list) {
        return {
            name: list.name,
            videos:
                videos.
                    filter(function(video) {
                        return video.listId === list.id;
                    }).    // I got stuck at this point.

This is the starting set of data:

function combine() {
    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, width: 130, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" },
            { videoId: 65432445, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" },
            { videoId: 675465, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
            { videoId: 675465, width: 120, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" },
            { videoId: 675465, width: 300, height:200, url:"http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
            { videoId: 70111470, width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" },
            { videoId: 70111470, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" },
            { videoId: 654356453, width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" },
            { videoId: 654356453, width: 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 }
        ];

        //My non-functional solution

    sizeArr = [];

        for(var i = 0; i < lists.length; i++){
            lists[i].videos = [];

            for(var j = 0; j < videos.length; j++){
                if(videos[j].listId === lists[i].id){
                    lists[i].videos.push(videos[j]);

                }
            for(var k = 0; k < bookmarks.length; k++){
                if(bookmarks[k].videoId === videos[j].id && videos[j].listId === lists[i].id){
                    videos[j].time = bookmarks[k].time;
                }

            for(var l = 0; l < boxarts.length; l++){
                var size = boxarts[l].width * boxarts[l].height;
                sizeArr.push(size);
                sizeArr = sizeArr.sort(function(min, max){
                    if(min < max){
                        return min;
                    }

                     if(boxarts[l].videoId === videos[j].id && videos[j].listId === lists[i].id){
                        videos[j].boxart = boxarts[l].url;
                    } 

                });
            }

            }

            }
            delete lists[i].id;
        }

    return lists;
}
combine();

Answer 1

This works, but it's not that efficient. You first could create dictionaries or maps from your arrays to allow quick id lookups. That would eliminate the need for filters.

I also avoided to mutate the initial data structures.

  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, width: 130, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber130.jpg" }, { videoId: 65432445, width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg" }, { videoId: 675465, width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" }, { videoId: 675465, width: 120, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture120.jpg" }, { videoId: 675465, width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" }, { videoId: 70111470, width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard150.jpg" }, { videoId: 70111470, width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/DieHard200.jpg" }, { videoId: 654356453, width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg" }, { videoId: 654356453, width: 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 }]; var videosByList = lists.map(function(list) { return { name: list.name, videos: videos.filter(function(video) { return video.listId == list.id; }).map(function(video) { return { id: video.id, title: video.title, time: bookmarks.filter(function(bookmark) { return bookmark.videoId == video.id; }).pop().time, boxart: boxarts.filter(function(boxart) { return boxart.videoId == video.id; }).sort(function(a, b) { return a.url < b.url ? 1 : (a.url > b.url ? -1 : 0); }).pop().url }; }) }; }); document.querySelector('pre').appendChild(document.createTextNode(JSON.stringify(videosByList, null, 4))) 

 <pre></pre> 

Answer 2

function combine () {

  var Genres = [];

  lists.forEach(function(genre) {
    var currGenre = makeGenre(genre.name, []);

    videos.filter(function(video){
      if (video.listId === genre.id) {
        return video;
      }
    }).forEach(function(video) {

      var time = bookmarks.filter(function(mark){
        if (video.id === mark.videoId) {
          return mark.time;
        }
      })[0];

      var art = boxarts.filter(function(art){
        if (video.id === art.videoId) {
          return art;
        }
      }).sort(function (a, b) { return a.width * a.height > b.width * b.height; })[0];

      currGenre.videos.push(makeVideo(video.id, video.title, time, art));
    });
    Genres.push(currGenre);
  });
  return Genres;
}

function makeGenre (name) {
  return {
    name: name,
    videos: []
  };
}

function makeVideo (id, title, time, boxart) {
  return {
    id: id,
    title: title,
    time: time,
    boxart: boxart
  };
}

Answer 3

There is a "Show Answer" button in the exercise page linked by the OP. I guess the answer button was not working in the OP's chosen browser, so I have pasted the solution here, including extra background information for the exercise:

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 };
            });
      })
  };
});

The exercises build on previous knowledge, which demonstrate the concatMap function (see Exercise 13 for the implementation), pasted here for convenience:

Array.prototype.concatMap = function(projectionFunctionThatReturnsArray) {
  return this.
    map(function(item) {
      return projectionFunctionThatReturnsArray(item);
    }).
    // apply the concatAll function to flatten the two-dimensional array
    concatAll();
};

concatAll is defined in Exercise 10, pasted here for convenience:

Array.prototype.concatAll = function() {
  var results = [];
  this.forEach(function(subArray) {
    results.push.apply(results, subArray);
  });

  return results;
};

The exercise instructions also dictate: "There's just more one thing: you can't use indexers. In other words, this is illegal var itemInArray = movieLists[0]; "

Edit

New information from OP. It seems like the OP would like to run the exercise without the context of the exercise page and see the answer produced to verify that it is correct. To do this you need some extra functions to be defined because the exercises implement slightly different versions to those supplied by default in JavaScript (ie filter , map , reduce , concatMap , concatAll , zip ). If you use the default JavaScript versions then results go missing as the OP described.

For your convenience, I have setup the required functions and the solution and logged the answer to the console in jsbin.com: http://jsbin.com/tolupe/edit?js,console