title: Using Flatmap map and filter instead of loop
body: <p>Consider the movie list</p>
  
  <pre><code>let 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": 654356453,
          "title": "Bad Boys",
          "boxarts": [{
              width: 200,
              height: 200,
              url: "http://cdn-0.nflximg.com/images/2891/BadBoys200.jpg"
            },
            {
              width: 150,
              height: 200,
              url: "http://cdn-0.nflximg.com/images/2891/BadBoys150.jpg"
            }
  
          ],
          "url": "http://api.netflix.com/catalog/titles/movies/70111470",
          "rating": 5.0,
          "bookmark": [{
            id: 432534,
            time: 65876586
          }]
        }
      ]
    },
    {
      name: "New Releases",
      videos: [{
          "id": 65432445,
          "title": "The Chamber",
          "boxarts": [{
              width: 150,
              height: 200,
              url: "http://cdn-0.nflximg.com/images/2891/TheChamber150.jpg"
            },
            {
              width: 200,
              height: 200,
              url: "http://cdn-0.nflximg.com/images/2891/TheChamber200.jpg"
            }
          ],
          "url": "http://api.netflix.com/catalog/titles/movies/70111470",
          "rating": 4.0,
          "bookmark": []
        },
        {
          "id": 675465,
          "title": "Fracture",
          "boxarts": [{
              width: 200,
              height: 200,
              url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg"
            },
            {
              width: 150,
              height: 200,
              url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg"
            },
            {
              width: 300,
              height: 200,
              url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg"
            }
          ],
          "url": "http://api.netflix.com/catalog/titles/movies/70111470",
          "rating": 5.0,
          "bookmark": [{
            id: 432534,
            time: 65876586
          }]
        }
      ]
    }
  ]
  </code></pre>
  
  <p>The movieList consist from those interfaces</p>
  
  <pre><code>interface Video {
    id:number;
    title:string;
    boxarts:{width:number,  height:number, url: string}[];
    uri:string;
    rating:number;
    bookmark: {id:number, time:number}[];
  }
  
  interface VideoCategory {
    name:string;
    videos: Video[];
  } 
  </code></pre>
  
  <p>I want to Implement a function getBoxArts() which gets a type similar to movieLists and returns a map {id, title, boxart} for every video in the movieLists, such that the boxart property in the result will be the url of the boxart object with dimensions of 150x200px.I need to use only Flatmap map and filter. But the only way I cant think of is indexed like this:</p>
  
  <pre><code>function getBoxarts(movie) {
    let res = [];
    for (let i = 0; i &lt; movie.length; i++) {
      for (let j = 0; j &lt; movie[i].videos.length; j++) {
        for (let l = 0; l &lt; movie[i].videos[j].boxarts.length; l++) {
          if ((movie[i].videos[j].boxarts[l].width == 150) &amp;&amp; (movie[i].videos[j].boxarts[l].height == 200)) {
            res.push({
              id: movie[i].videos[j].id,
              title: movie[i].videos[j].title,
              boxarts: movie[i].videos[j].boxarts[l]
            });
          }
        }
  
      }
  
    }
    return res;
  }
  </code></pre>
  
  <p>The code contains 3 loops and it is not pretty.</p>
  
  <p>edit: I have defined a function called a flatmap</p>
  
  <pre><code>    const concat = (x,y) =&gt;
           x.concat(y)
  
      const flatmap = (f,xs) =&gt;
           xs.map(f).reduce(concat, [])
  </code></pre>
  
  <p>What it does is gets a function f and an array A as parameter, and returns the concatenation of all the arrays returned by f when it is applied to each element in A.
  for example </p>
  
  <pre><code>     Flatmap((x)=&gt;x[0], [[[1,2], [3,4]], [[5,6], [7,8]]]) =&gt; [1,2,5,6]
  </code></pre>