AngularJS和WordPress API顯示來自單個帖子的數據

Question

我使用WordPress API作爲AngularJS/Ionic應用程序的數據服務。我有一個職位類型調用的程序，並有計劃（職位）的列表和JSON的樣子：

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" 
} 
] 

我有與ngRepeat顯示程序列表。不過，我正在努力獲取單個帖子的數據。

我試圖做到這一點，像這樣得到的數據爲單個程序：var programme = programmes[$stateParams.programmeId];但問題是，例如，如果我點擊第一個「A郵報」則返回從程序ID 6但這並不匹配0對象的索引。

當ID和索引不匹配而無需手動重置數據庫中的程序ID時，如何從單個程序獲取數據？

這裏是我的文件至今：

app.js

.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'); 
}); 

data.js

.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'); 
    } 
    } 
}) 

controllers.js

.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'; 
    }); 
    } 
}) 

programme.html（視圖中顯示單個節目）

<ion-view view-title="{{programme.title}}"> 
    <ion-content> 
    <ion-list> 
     <ion-item> 
     {{programme.title}} 
     </ion-item> 
    </ion-list> 
    </ion-content> 
</ion-view> 

Answer 1

可以在程序使用簡單的循環陣列查找特定單程序。請參閱以下功能的修改getProgrammes()功能：

function getProgrammes() { 
      DataFactory.getProgrammes().then(function (response, id) { 
        var programmes = response.data; 
        for (var i = 0; i < programmes.length; i++) { 
         if (programmes[i].id == $stateParams.programmeId) { 
          $scope.programme = programmes[i]; 
          break; 
         } 
        } 
       }, 
       function (error) { 
        $scope.status = 'Unable to load data'; 
       }); 
     }