title: AngularJS and WordPress API display data from single post
body: <p>I'm using the WordPress API as a data service to an AngularJS/Ionic app. I have a post type called programmes and have a list of programmes (posts) and the JSON looks like:</p>
  
  <pre><code>var programmes = [
   {
    id: 6,
    title: "A post",
    slug: "a-post"
   },
   {
    id: 7,
    title: "Another post",
    slug: "another-post"
   },
   {
    id: 8,
    title: "Post 123",
    slug: "post-123"
   }
  ]
  </code></pre>
  
  <p>I've got the list of programmes displaying with ngRepeat. However I'm struggling to get the data for an individual post.</p>
  
  <p>I was trying to do it like so to get data for the single programme: <code>var programme = programmes[$stateParams.programmeId];</code> however the issue is, for example, if I click on the first "A post" it returns <code>6</code> from the programme id but this does not match the index of the object which is <code>0</code>.</p>
  
  <p>How can I get data from a single programme when the id and index do not match without having to manually reset the programme id's in the database?</p>
  
  <p>Here are my files so far:</p>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>.config(function($stateProvider, $urlRouterProvider) {
    $stateProvider
  
    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })
  
    .state('app.programmes', {
      url: "/programmes",
      views: {
        'menuContent': {
          templateUrl: "templates/programmes.html",
          controller: 'ProgrammesCtrl'
        }
      }
    })
  
    .state('app.programme', {
      url: "/programmes/:programmeSlug",
      views: {
        'menuContent': {
          templateUrl: "templates/programme.html",
          controller: 'ProgrammeCtrl'
        }
      }
    })
    $urlRouterProvider.otherwise('/app/programmes');
  });
  </code></pre>
  
  <p><strong>data.js</strong></p>
  
  <pre><code>.factory('DataFactory', function($http) {
  
    var urlBase = 'http://event-app.dev/wp-json/wp/v2';
    var APIdata = {};
  
    var currentProgramme = null;
  
    return {
      getProgrammes: function() {
        return $http.get(urlBase + '/programmes');
      }
    }
  })
  </code></pre>
  
  <p><strong>controllers.js</strong></p>
  
  <pre><code>.controller ('ProgrammesCtrl', function ($scope, DataFactory) {
    getProgrammes();
    function getProgrammes() {
      DataFactory.getProgrammes().then(function(response) {  
        $scope.programmes = response.data;
      }, 
      function(error) {
        $scope.status = 'Unable to load data';
      });
    }
  })
  
  .controller ('ProgrammeCtrl', function ($scope, $stateParams, DataFactory) {
    getProgrammes();
    function getProgrammes() {
      DataFactory.getProgrammes().then(function(response, id) { 
        var programmes = response.data;
        $scope.programme = programmes[$stateParams.programmeId];
  
      }, 
      function(error) {
        $scope.status = 'Unable to load data';
      });
    }
  })
  </code></pre>
  
  <p><strong>programme.html (view to display a single programme)</strong></p>
  
  <pre><code>&lt;ion-view view-title="{{programme.title}}"&gt;
    &lt;ion-content&gt;
      &lt;ion-list&gt;
        &lt;ion-item&gt;
          {{programme.title}}
        &lt;/ion-item&gt;
      &lt;/ion-list&gt;
    &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>