Mapping data from multiple arrays of objects to a new object in Javascript using functional programming

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

Seems like all you have left to do is .forEach() over the videos you filtered, and for each video, .forEach() (or .reduce()) over the boxart array and find the entry with the videoId matching the current video.id and assign its url property to video.boxart. Then do similarly with bookmarks. — user1106925
– user1106925, Commented Jul 10, 2015 at 19:45
Thank you. I may have been too focused on using filter() to the exclusion o the other methods. — davisec52
– davisec52, Commented Jul 10, 2015 at 21:40

plalx · Accepted Answer · 2015-07-10 20:09:31Z

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>

Good idea to not mutate the originals. Presort the boxarts (or a copy of it) according to width * height and then use the ES6 .find() instead of .filter() for boxart and time, and that'll go a long way for performance.

ChadF · Accepted Answer · 2015-07-10 20:19:49Z

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

answered Jul 10, 2015 at 20:19

ChadF

1,75810 silver badges22 bronze badges

1 Comment

davisec52 Over a year ago

Thank you. A really helpful lesson in functional programing.

Jeremy Larter · Accepted Answer · 2015-07-14 11:30:56Z

0

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 (i.e 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

edited Jul 14, 2015 at 11:30

answered Jul 12, 2015 at 6:36

Jeremy Larter

5582 gold badges11 silver badges21 bronze badges

4 Comments

davisec52 Over a year ago

Thank you for contributing! The show button was working, but I mounted the solution you have posted in Chrome dev tools along with the concatAll, concatMap, and zip functions. The function returned empty arrays. From that I assumed there was a bug in the answer.

Jeremy Larter Over a year ago

@davisec52 You are welcome. I have edited my answer to include a standalone answer to the exercise in order to show that there is no bug. I was able to replicate getting empty arrays when the extra functions are not available to the solution.

davisec52 Over a year ago

Thank you for the clarification and taking the time to mount the solution on jsbin. I see now that the the solution does work, and that I was incorrect in assuming a flawed solution. Your response provides clarity and understanding to the entire functional programming tutorial. Much appreciated!

Jeremy Larter Over a year ago

@davisec52 My pleasure. I learned a lot from going through the exercise as well.

Collectives™ on Stack Overflow

Mapping data from multiple arrays of objects to a new object in Javascript using functional programming

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related