AngularJSとWordPress APIが単一の投稿からデータを表示する

Question

私はAngularJS/IonicアプリケーションへのデータサービスとしてWordPress APIを使用しています。私は、プログラムと呼ばれるポストの種類があり、プログラムのリストを持っている（記事）と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];を問題はあるが、例えば、私が最初に「ポスト」をクリックすると、それはプログラムIDから6返しますが、これはしませんオブジェクトのインデックスである0と一致します。

データベース内のプログラムIDを手動でリセットしなくても、IDとインデックスが一致しない場合、どのようにして1つのプログラムからデータを取得できますか？ここで

は、私のファイルは、これまでのところ、次のとおりです。

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