2015-06-23 2 views
1

Я хочу сделать приложение angularjs, чтобы сделать http-запрос, я делаю следующий код (index.html), чтобы сделать http-запрос данных JSON с помощью angularjs. Но он не печатает данные json.Как сделать запрос http в AngularJS для получения данных JSON?

В консоли светлячок я получаю следующее предупреждение (такое же происхождение
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:8080/admin/metering/samples?meter=instance&group_by=project&stats_attr=avg&date_options=7&date_from=&date_to=. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

У меня есть josn данные в следующем формиата. URL является http://127.0.0.1:8080/admin/metering/samples?meter=instance&group_by=project&stats_attr=avg&date_options=7&date_from=&date_to=

{ 
    "series": [ 
     { 
      "meter": "instance", 
      "data": [ 
       { 
        "y": 1, 
        "x": "2015-06-17T09:52:17" 
       }, 
       { 
        "y": 1, 
        "x": "2015-06-18T09:57:40" 
       }, 
       { 
        "y": 1, 
        "x": "2015-06-19T09:55:29" 
       }, 
       { 
        "y": 1, 
        "x": "2015-06-20T09:59:43" 
       }, 
       { 
        "y": 1, 
        "x": "2015-06-21T05:35:26" 
       }, 
       { 
        "y": 1, 
        "x": "2015-06-22T09:56:47" 
       }, 
       { 
        "y": 1, 
        "x": "2015-06-23T09:55:07" 
       } 
      ], 
      "name": "demo", 
      "unit": "instance" 
     } 
    ], 
    "settings": {} 
} 

Index.html

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
</head> 

<body> 
    <div ng-app="myApp" ng-controller="customersCtrl"> 
    <ul> 
     <li ng-repeat="value in meters"> 
     {{value.x+','+value.y}} 
     </li> 
    </ul> 
    </div> 
    <script> 
    var app = angular.module('myApp', []); 
    app.controller('customersCtrl', function($scope, $http) { 
     $http.get("http://127.0.0.1:8080/admin/metering/samples?meter=instance&group_by=project&stats_attr=avg&date_options=7&date_from=&date_to=") 
     .success(function(response) { 
      console.log(response.series[0].data) 
      $scope.meters = response.series[0].data; 
     }); 
    }); 
    </script> 
</body> 

</html> 
+0

пожалуйста, проверьте мой plunker может Хель p :) – squiroid

ответ

0

опечатка: - изменение myyApp to myapp

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

Некоторые логическая проблема также была исправлена, пожалуйста, проверьте plunker. KG

$scope.meters=response.records; в $scope.meters=response.series[0].data;

нг-повтор должен быть как: -

<li ng-repeat="value in meters"> 
         {{value.x+','+value.y}} 
        </li> 

Обновлено Plunker

+0

Еще я получаю такой же результат. – geeks

+0

вы проверили мой обновленный ответ @neelabhsingh – squiroid

+0

Да, ваш код работает, когда я делаю имя файла «data.json» в своей локальной системе. Но тот же код не работает, когда я заменяю «data.json» на url. Пожалуйста, см. Мой url в вопросе, это тот же пользователь, который дает данные json, пожалуйста, помогите мне в этом, спасибо ........... – geeks

0

Пожалуйста, измените

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

и

<li ng-repeat="value in meters.series.data"> 
{{value.x}} -- {{value.y}} 
</li> 
+0

Спасибо за ответ. Я до сих пор не получаю данные json. – geeks

+0

Вы получаете какую-либо ошибку в 'console'? – Vineet

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