読み込む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')
