Namepy step 7 – Bringing it all together

(This is part of the namepy project. Start at Namepy – on the shoulders of giants)

Time to show some real results on a web page.

1. Extend the API to show the letter scoring tables, no pagination, in __init__.py add:

   manager.create_api(models.Set, methods=['GET'], results_per_page=0)
   

2. Rename helloworld.html to index.html
3. At the end of views.py, update the template name to index.html, and stop passing in ‘names’ since this is now done through the API, and rename the endpoint function to ‘index’:

   @app.route("/")
   def index():
   return render_template('index.html')
   

That’s it for the changes to the back end. The rest of the changes will all be in the front end, in index.html

4. Rename the app from HelloWorldApp to NamePyApp
5. Rename the controller from HelloWorldController to NamePyController
6. Load the letter scoring table, and simplify it for faster lookup

   $scope.sets = [];
   angular.forEach(response.data.objects, function(set, index) {
   scores = {};
   angular.forEach(set.scores, function(score, index) {
   scores[score.letter] = score.score;
   });
   $scope.sets.push({ name: set.name, scores: scores});
   });
   

7. Calculate the score for each of the sets

   angular.forEach($scope.sets, function(set, index) {
   var total = 0;
   var error = false;
   angular.forEach(name.split(''), function(character, index2) {
   if (character in set.scores) {
   total += set.scores[character];
   } else {
   error = true;
   }
   });
   
   if (error == false) {
   result.push([set.name, total]);
   }
   
   $scope.sort_on_element(result, 1);
   
   $scope.scores = result;
   });
   

8. Show the result on the page, using Highcharts. For the code see the source code, function “showLetterScores”

Show baby name distribution

9. Get data for entered name

   var filters = [{ name: 'name',
   op: 'ilike',
   val: $scope.visitor_name}];
   
   $http({
   method: 'GET',
   url: 'api/name',
   params: {"q": JSON.stringify({"filters": filters})}
   })
   .then(
   $scope.show_name_distribution,
   function(response) {
   $('#babynames_container').hide();
   }
   );
   

10. Restructure the results for Highcharts

    var boy_frequency = [];
    var girl_frequency = [];
    var boys_found = false;
    var girls_found = false;
    
    angular.forEach(response.data.objects[0].frequencies,
    function(frequency) {
    boy_frequency.push([
    Date.UTC(frequency.year, 1, 1),
    frequency.boys_count]);
    
    girl_frequency.push([
    Date.UTC(frequency.year, 1, 1),
    frequency.girls_count]);
    
    if (frequency.boys_count) boys_found = true;
    if (frequency.girls_count) girls_found = true;
    });
    
    $scope.sort_on_element(boy_frequency, 0);
    $scope.sort_on_element(girl_frequency, 0);
    

11. Show the results using Highcharts. See the source code, function “show_name_distribution”

Done

• The source code is at https://github.com/CoachCoen/namepy/tree/step7
• The live page is at http://cm-demo.com/namepy_step7/

Done Done

This is the final blog post for this little project. I hope you found it useful.