Combining results from WP-API using AngularJS

1 comment

1. Angular is a great JavaScript front-end framework to choose, and you’re off to a good start, but a lot of changes could be made. I’ve made some suggested changes for easier ways to do things below.

   See this CodePen for all changes.

   It looks like you’ve grasped the idea of ng-repeat, but there’s definitely a lot of repeated HTML and JS in your view and controller, so let’s see if we can do better.

   1. Let’s try this without jQuery to avoid direct manipulation of the DOM. And instead of many controllers, we can do this with a single controller.

      <div ng-app="MyApp">
          <div ng-controller="MyController">
          ...
          </div>
      </div>
      <script type="text/javascript">
          var app = angular.module('MyApp', []);
          app.controller('MyController', ...);
      </script>
      

   2. For the dropdown, we’ll use ng-repeat in our view and display the names of the shooting types from our model

      ...
      <select ng-model="selectedListing">
          <option
              ng-repeat="listingShootingType in listingShootingTypes"
              value="{{listingShootingType.name}}">
              {{listingShootingType.name}}
          </option>
      </select>
      ...
      <script type="text/javascript">
          ...
          // Our selections/filters
          $scope.listingShootingTypes = [
              'All',
              'Air Rifle/Air Pistol',
              'Clay',
              'ABT',
              'Double Trap',
              'English Skeet',
              'English Sporting',
              'Fitasc',
              'Olympic Skeet',
              'Olympic Trap',
              'Simulated Game',
              'Sport Trap/Compact',
              'Universal Trench',
              'ZZ/Helice',
              'Rifle',
              'Centrefire Target Rifle',
              'Gallery Rifle',
              'Muzzle Loading',
              'Practice Shotgun',
              'Smallbore Rifle'
          ];
          ...
      </script>
      

   3. With only one controller, we can still use ng-repeat for each listing.

      <div ng-repeat="d in data">
          <h2 class="entry-title title-post">{{d.title}}</h2>
          <div id="listing-image"><img src="{{d.acf.logo}}"></div>
          <div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
          <div id="listing-address-1">
              {{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
          </div>
          <div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
          <div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
          <div id="listing-email">Email: {{d.acf.email}}</div>
          <div id="listing-website">Website: <a href="{{d.acf.website}}">{{d.acf.website}}</a></div>
          <div id="listing-established">Established: {{d.acf.established}}</div>
          <div id="listing-about">About: {{d.acf.about}}</div>
          <div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
          <div id="listing-directions">Directions: {{d.acf.directions}}</div>
          <div id="scd-link"><a href="{{d.link}}">View on The Shooting Club Directory</a></div>
      </div>
      

   4. Finally… How do we only display listings that match our selected shooting type from the dropdown? We could use a custom Angular filter!

      ...
      <div ng-repeat="d in data | filter:isSelectedListing">
      ...
      <script type="text/javascript">
          ...
          // Let's define a custom Angular filter because the WordPress JSON is complex
          $scope.isSelectedListing = function(listing) {
              // Show nothing if nothing is selected
              if (angular.isUndefined($scope.selectedListing) || $scope.selectedListing == '') {
                  return false;
              }
      
              // Show all if 'All' is selected
              if ($scope.selectedListing == 'All') {
                  return true;
              }
      
              // If the shooting type we're looking for is present, show the listing.
              // To do this, we parse the WordPress JSON object model.
              if (angular.isDefined(listing.terms.listing_shooting_type)) {
                  for (var i = 0; i < listing.terms.listing_shooting_type.length; i++) {
                      if (listing.terms.listing_shooting_type[i].name == $scope.selectedListing) {
                          return true;
                      }
                  }
              }
              return false;
          };
          ...
      </script>
      

   Hopefully this gives you an idea of how we better leverage ng-repeat + DRY 🙂

   The entire CodePen is here.

Comments are closed.