Filter Exercises

Upshot

Filters are provided for us by little factory functions which we define.
Define a filter using myApp.filter(‘filterName’, function() {});
the function is a factory which should return another function which acts as the filter.

For example

myApp.filter("filterName", function () {
  return function (str) {
    return "hello there " + str + "!";
  };
});

Exercise - Reverse Filter

You can reverse a string using something like:

"abc".split("").reverse().join("");

You might like to try this out in a console.

Create a reverse filter that reverses a string.

Exercise - Filtering the first element from an array

We can filter an array in a similar way. The filter returns a function which receives an array, and returns a modified array.

Create a filter that returns only the first element in the array.

Exercise - Pagination

Create a filter that returns the first n elements from an array.

Exercise - Tweets

Tweets often contain #hashtags and @mentions. Write a a filter that takes a raw tweet and hyperlinks the mentions and hashtags.

Something like this:

I'm sorry @dave, #icantdothat

becomes

I'm sorry <a href="http://twitter.com/@dave"> @dave </a>,
<a href="http://twitter.com/search?query=#icantdothat"> #icantdothat </a>

Exercise - Redit style vote filtering

Given an array of comments and votes like this:

[
  {
    comment: "I really like cheese",
    votes: 10,
  },
  {
    comment: "I'm not so sure about edam though",
    votes: -2,
  },
  {
    comment: "Gouda properly rocks!",
    votes: 4,
  },
  {
    comment: "I quite like a bit of mild cheddar",
    votes: -19,
  },
  {
    comment: "Cheese is just old milk",
    votes: -8,
  },
];

Create a vote filter that only shows comments which scored over a certain amount.

Hint - use the Array filter method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

Now add a number field and bind it to a value. When you change the value, only comments with a higher value will be shown.

for bonus points, use a range slider like so:

<input type="range" min="-100" max="100" />