AngularJSでWebAPIを利用してJSONPで読み込むサンプル

読み込むWebAPIには、https://api.loctouch.com/v1/railway/stations?line_cd=11302を使用しています。
外部サーバーにあるJSONの場合は、JSONPでクロスドメイン通信というやり方で呼び出す。
そして、コールバック関数にJSON_CALLBACKをつけないといけない。

AngularJSでのJSONP読み込みサンプル

<!DOCTYPE HTML>
<html ng-app="myApp" lang="ja">
<head>
  <meta charset="utf-8">
  <title>Angular JSON Get Sample</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
  <script>
  var app = angular.module('myApp', []);

  app.factory('WebApi', function($http){
    var jsonData = {};
    jsonData.getFeedId = function(callback){
    $http.jsonp('https://api.loctouch.com/v1/railway/stations?line_cd=11302&callback=JSON_CALLBACK')
      .success(function(data){
        callback(data);
      })
      .error(function(){
        alert('APIデータ取得失敗');
      });
    }
    return jsonData;
  });

  app.controller('MainController', ['$scope', 'WebApi', function($scope, WebApi){
    WebApi.getFeedId(function(data){
    $scope.items = data.stations;
    });
  }]);
  
  </script>
</head>
<body ng-controller="MainController">
<ul>
  <li ng-repeat="value in items">
  {{value.line_name}} {{value.spot_station_name}}
  </li>
</ul>
</body>
</html>

もし、提供されたWebAPIではなく、自分で作成したJSONファイルを、外部サーバーから読み込みたいという場合は以下のように、JSONを設置しているサーバー上に新しくphpファイルを作成して、phpからJSONを呼び出すようにする。

<?php
header("Access-Control-Allow-Origin: *"); // クロスドメイン通信の許可
$json = file_get_contents('./sample.json'); // 読み込むJSONファイルを指定
header('Content-Type: text/javascript; charset=utf-8');
echo $_GET['callback'] . '('. $json .')';
?>

例えば、上記のphpをsample.phpという名前で作成した場合、呼び出しURIは以下のような感じになる。

$http.jsonp('http://www.example.com/sample.php?callback=JSON_CALLBACK')