How to use Angular JS with reults from WP-API

Question

I have this URL working with my site using wp-api -

http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=midlands

which outputs this code (using a chrome plugin to display it neatly) -

I'm really new to this and would appreciate if someone could point me in the right direction of how to use AngularJS (This is what I've read is best to use) to display this data on a useable page.

This is the code I have so far pulling in the data -

<script type="text/javascript">
        function goToNewPage()
        {
            var url = document.getElementById('list').value;
            if(url != 'none') {
                window.location = url;
            }
        }
    </script>

    <select name="list" id="list" accesskey="target">
        <option value='none' selected>Choose a region</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northwest">North West</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northeast">North East</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=midlands">Midlands</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=eastanglia">East Anglia</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=southeast">South East</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=southwest">South West</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=scotland">Scotland</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=wales">Wales</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=northernireland">Northern Ireland</option>
        <option value="http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=channel">Channel Islands</option>






    <select>

    <input type=button value="Go" onclick="goToNewPage()" /> 

The link - http://scd.blaze.wpengine.com/test/

Thanks for any help in advance!

Answer 1

Ok there is not much Angular in your code but here is a starting point:

View:

<div ng-app="myApp" ng-controller="regionsCtrl">
  <label>Select a region:</label>
  <select ng-options="region for region in regions" ng-model="region" ng-change="getRegionData()">
  </select>
  <table>
    <tr>
      <th>id</th>
      <th>Title</th>
      <th>Status</th>
      <th>Type</th>
    </tr>
    <tr ng-repeat="d in data">
      <td>{{d.ID}}</td>
      <td>{{d.title}}</td>
      <td>{{d.status}}</td>
      <td>{{d.type}}</td>
    </tr>
  </table>
</div>

Controller:

var app = angular.module('myApp', []);
app.controller('regionsCtrl', function($scope, $http) {
  $scope.regions = [
    'North West', 'North East', 'Midlands', 'East Anglia', 'South East', 'South West', 'Scotalnd', 'Wales'
  ]

  $scope.getRegionData = function() {
    var region = $scope.region
    $http.get("http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=#{region}").then(function(data) {
      $scope.data = data; //this is the data that server returns
    })
  }
});

take a look at this fiddle

What this does is makes an call to the server using the region from the select menu, then stores the array returned from server in a variable on the scope (data in this case), then you can iterate over it in your view using ng-repeat. Bear in mind that I can't access the server due to cors but if you have the right credentials it should work.