1

Имеется страница с json данными которые должны отображаться на сайте в таблице, Если указывать $http.get и ссылку на локальный файл то отображает все как надо , а с запросом $http.jsonp и внешней ссылкой не выводит никаких данных. В консоль никаких ошибок не выводится

<!doctype html>
<html ng-app="CupApp">
<head>
<meta charset="utf-8">
<title>Главная</title>
<meta name="author" content="Бородин Дмитрий">
<link href="Безымянный1.css" rel="stylesheet">
<link href="Rating.css" rel="stylesheet">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
 <script>
  var CupApp = angular.module('CupApp', []);
  CupApp.controller('CupCtrl', function ($scope, $http){
    $http.jsonp('http://json.onlydota.ru/test.html').success(function(data) {
      $scope.cups = data;
    });
  });
 </script>
</head>
<body ng-controller="CupCtrl">
<div id="container">
<div id="wb_Shape1" style="position:absolute;left:0px;top:51px;width:800px;height:1100px;filter:alpha(opacity=60);opacity:0.60;z-index:0;">
<img src="images/img0001.png" id="Shape1" alt="" style="width:800px;height:1100px;"></div>
<div id="wb_Image5" style="position:absolute;left:7px;top:97px;width:251px;height:37px;z-index:1;">
<img src="images/admos-logo-master.png" id="Image5" alt=""></div>
<div id="Html1" style="position:absolute;left:9px;top:180px;width:778px;height:957px;z-index:2">
<h2>Топ в компании</h2>
  <table class="table table-striped">
   <tr>
    <th>Место</th>
    <th>Менеджер</th>
    <th>Балы</th>
   </tr>
   <tr ng-repeat="cup in cups | orderBy: 'code.length' | filter:{ doc:'top' }">
    <td>{{cup.code}}</td>
    <td>{{cup.name}}</td>
    <td>{{cup.score}}</td>
   </tr>
  </table>

</div>
<div id="wb_CssMenu2" style="position:absolute;left:304px;top:80px;width:483px;height:70px;text-align:center;z-index:3;">
<ul>
<li class="firstmain"><a href="./index.html" target="_self" title="&#1050;&#1072;&#1082; &#1101;&#1090;&#1086; &#1088;&#1072;&#1073;&#1086;&#1090;&#1072;&#1077;&#1090;">&#1050;&#1072;&#1082;&nbsp;&#1101;&#1090;&#1086;&nbsp;&#1088;&#1072;&#1073;&#1086;&#1090;&#1072;&#1077;&#1090;</a>
</li>
<li><a class="withsubmenu active" href="./Rating.html" target="_self" title="&#1056;&#1077;&#1081;&#1090;&#1080;&#1085;&#1075;&#1080;">&#1056;&#1077;&#1081;&#1090;&#1080;&#1085;&#1075;&#1080;</a>

<ul>
<li class="firstitem"><a class="active" href="./Rating.html" target="_self" title="&#1058;&#1054;&#1055; &#1074; &#1082;&#1086;&#1084;&#1087;&#1072;&#1085;&#1080;&#1080;">&#1058;&#1054;&#1055;&nbsp;&#1074;&nbsp;&#1082;&#1086;&#1084;&#1087;&#1072;&#1085;&#1080;&#1080;</a>
</li>
<li><a href="./Sobitiya.html" target="_self" title="&#1057;&#1086;&#1073;&#1099;&#1090;&#1080;&#1103;">&#1057;&#1086;&#1073;&#1099;&#1090;&#1080;&#1103;</a>
</li>
<li><a href="./Vstrechi.html" target="_self" title="&#1042;&#1089;&#1090;&#1088;&#1077;&#1095;&#1080;">&#1042;&#1089;&#1090;&#1088;&#1077;&#1095;&#1080;</a>
</li>
<li><a href="./Old.html" target="_self" title="&#1057;&#1095;&#1077;&#1090;&#1072; &#1090;&#1077;&#1082;&#1091;&#1097;&#1080;&#1084; &#1082;&#1083;&#1080;&#1077;&#1085;&#1090;&#1072;&#1084;">&#1057;&#1095;&#1077;&#1090;&#1072;&nbsp;&#1090;&#1077;&#1082;&#1091;&#1097;&#1080;&#1084;&nbsp;&#1082;&#1083;&#1080;&#1077;&#1085;&#1090;&#1072;&#1084;</a>
</li>
<li><a href="./New.html" target="_self" title="&#1057;&#1095;&#1077;&#1090;&#1072; &#1085;&#1086;&#1074;&#1099;&#1084; &#1082;&#1083;&#1080;&#1077;&#1085;&#1090;&#1072;&#1084;">&#1057;&#1095;&#1077;&#1090;&#1072;&nbsp;&#1085;&#1086;&#1074;&#1099;&#1084;&nbsp;&#1082;&#1083;&#1080;&#1077;&#1085;&#1090;&#1072;&#1084;</a>
</li>
<li class="lastitem"><a href="./Pay.html" target="_self" title="&#1054;&#1087;&#1083;&#1072;&#1090;&#1072; &#1089;&#1095;&#1077;&#1090;&#1086;&#1074;">&#1054;&#1087;&#1083;&#1072;&#1090;&#1072;&nbsp;&#1089;&#1095;&#1077;&#1090;&#1086;&#1074;</a>
</li>
</ul>
</li>
<li><a href="./Rules.html" target="_self" title="&#1055;&#1088;&#1072;&#1074;&#1080;&#1083;&#1072;">&#1055;&#1088;&#1072;&#1074;&#1080;&#1083;&#1072;</a>
</li>
</ul>
</div>
</div>
</body>
</html>

1 ответ 1

0

Файл по ссылке не является JSONP файлом.

http://json.onlydota.ru/test.html

JSONP - это по сути JS файл, в котором содержится вызов функции, с параметром JSON. Вам нужно добавить к ссылке параметр callback=JSON_CALLBACK.

http://json.onlydota.ru/test.html?callback=JSON_CALLBACK

AngularJS заменяет JSON_CALLBACK на свое название, заданное в параметрах. Так что ваш JSONP файл должен выглядеть подобным образом:

   angular.callbacks._0(/* Ваш JSON */)
4
  • Получается я меняю расширение файла на js + вставляю перед данными JSON_CALLBACK(*) ?
    – heymukki
    Commented 4 окт. 2016 в 10:01
  • У меня получается такой запрос <script> var CupApp = angular.module('CupApp', []); CupApp.controller('CupCtrl', function ($scope, $http){ $http.jsonp('http://www.mocky.io/v2/57f380570f0000d30e060555?callback=JSON_CALLBACK').success(function(data) { $scope.cups = data; }); }); </script> и перед данными json я поставил 'JSON_CALLBACK()' Но теперь получаю ошибку в консоль 'Uncaught ReferenceError: JSON_CALLBACK is not defined"
    – heymukki
    Commented 4 окт. 2016 в 10:18
  • да, оказывается $http.jsonp работает не так как я предполагал. Чуть позже отпишусь Commented 4 окт. 2016 в 10:25
  • Хорошо , спасибо
    – heymukki
    Commented 4 окт. 2016 в 10:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.