Post
Ask Question

Underscore.js Tutorial

What is underscore.js? 
 
Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. - Excerpts from http://underscorejs.org/
 
Lets unleash power of underscore.js
  • You can download it from http://underscorejs.org/underscore.js 

    OR
    1. npm install underscore     
  • Use any editor to write HTML file, I prefer Sublime Text, but it's your choice
  • Case study: There are many restaurants in City with different cuisines, menu items etc. Let's find desired output from what we want:
    1. <!DOCTYPE html>  
    2. <html ng-app>  
    3.   
    4.   <head>  
    5.     <script type='text/javascript' src='angular.js'></script>  
    6.     <script type='text/javascript' src='controller.js'></script>  
    7.   </head>  
    8.   
    9.   <body>  
    10.     <script type='text/javascript'>  
    11.     var restaurant = [{  
    12.         'id': '0',  
    13.         'restaurantName': 'Indian Delight',  
    14.         'street': '123, Street1, 1st Avenue',  
    15.         'menu': [{  
    16.           'Roti': '5',  
    17.           'Dal': '10',  
    18.           'Veggies': '20'  
    19.         }]  
    20.       },  
    21.       {  
    22.         'id': '1',  
    23.         'restaurantName': 'Chinese Hut',  
    24.         'street': '456, Street2, 2nd Avenue',  
    25.         'menu': [{  
    26.           'Dimsum': '10',  
    27.           'Momos': '20',  
    28.           'Soup': '15'  
    29.         }]  
    30.       },  
    31.       {  
    32.         'id': '2',  
    33.         'restaurantName': 'Italian Bistro',  
    34.         'street': '789, 5th Block, 3rd Avenue',  
    35.         'menu': [{  
    36.           'Pasta': 15,  
    37.           'Pizza': 20,  
    38.           'Salad': 5  
    39.         }]  
    40.       }  
    41.     ]  
    42.   
    43.     function GetAllRestaurant() {  
    44.       console.log(_.pluck(restaurant, 'restaurantName'));  
    45.     }  
    46.   
    47.     function RestaurantTotalMenuItemPrice(id) {  
    48.       var RestaurantMenu = _.pluck(restaurant, 'menu')[id];  
    49.       //Find RestaurantMenu by passing id    
    50.       //output is object > [...]    
    51.       //sum prices of all items, therefore we'll get all values from Key Pair    
    52.       var prices = _.values(RestaurantMenu[0]);  
    53.       //now reduce values to sum    
    54.       var sum = _.reduce(prices, function(memo, num) { return memo + num; })  
    55.       console.log(sum);  
    56.     }  
    57.   
    58.     function TotalRestaurant() {  
    59.       console.log(_.size(restaurant));  
    60.     }  
    61.     GetAllRestaurant(); //output : ["Indian Delight", "Chinese Hut", "Italian Bistro"]      
    62.     RestaurantTotalMenuItemPrice(2); //output : 40    
    63.     TotalRestaurant(); //output : 3  
    64.     </script>  
    65.     </div>  
    66.   </body>  
    67.   
    68. </html> 
Next Recommended Reading Using Datatable JS For Showing List/ Table Data With Action (Edit/ Delete) Buttons