2016-05-05 2 views
0

Может кто-нибудь, пожалуйста, взгляните на мою скрипту js, я пытаюсь получить угловой JS для отображения списка в файле JSON, но я не могу заставить его работать.AngularJS json url не работает

Очень новый угловой JS и пытаюсь понять это, как я иду

https://jsfiddle.net/2zumpvy9/

<body ng-app="DraftApp"> 
    <div class="main" ng-controller="HomeController"> 
    <div class="container"> 

     <div class="each" ng-repeat="player in players"> 
     {{ player.Player }} 
     </div> 

    </div> 
    </div> 
</body> 


var app = angular.module('DraftApp', []); 

app.factory('players', ['$http', function($http) { 
    return $http.get('http://redraft.comxa.com/test.json') 
    .success(function(data) { 
     return data; 
    }) 
    .error(function(err) { 
     return err; 
    }); 
}]); 


app.controller('HomeController', ['$scope', 'players', function($scope, players) { 
    players.success(function(data) { 
    $scope.players = data; 
    }); 
}]); 
+0

у вас возникли проблемы CORS: 'XMLHttpRequest не может загрузить http://redraft.comxa.com/test.json. В запрошенном ресурсе нет заголовка «Access-Control-Allow-Origin». Следовательно, исходный «null» не допускается. –

+0

Так что мне нужно разместить файл JSON где-то еще? Я до сих пор использовал codecademy для изучения, и это первый раз, когда я выхожу из этой среды, и это не так просто, как они заставляют его выглядеть. -_- – HJB77

+0

Также вы не играете. – alphapilgrim

ответ

0

Однако, вы можете использовать https://crossorigin.me/ службы.

Затем вы должны запросить «https://crossorigin.me/http://redraft.comxa.com/test.json». Наконец, это может быть легко использовано в вашем коде AngularJS.

Я сделал демоверсию, используя сервис AnglerJS и контроллер.

var app = angular.module("DraftApp", []); 
 

 
app.factory("players", ["$http", 
 
    function($http) { 
 
    return $http.get("https://crossorigin.me/http://redraft.comxa.com/test.json") 
 
     .success(function(data) { 
 
     return data; 
 
     }) 
 
     .error(function(err) { 
 
     return err; 
 
     }); 
 
    } 
 
]); 
 

 
app.controller("HomeController", ["$scope", "players", 
 
    function($scope, players) { 
 
    players.success(function(data) { 
 
     $scope.players = data; 
 
    }); 
 
    } 
 
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="DraftApp"> 
 
    <div class="main" ng-controller="HomeController"> 
 
    <div class="container"> 
 

 
     <div class="each" ng-repeat="player in players"> 
 
     {{ player.Player }} 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

+0

Спасибо Дэнни, это именно то, что я был после. Я сейчас на работе, но когда я вернусь домой, у меня будет игра. Цените помощь – HJB77

+0

Добро пожаловать. –

Смежные вопросы