Извлечь внешний файл json через Angular JS

Я пытаюсь получить данные json с помощью Angular JS. Я успешно получаю статические данные json. Но теперь я пытаюсь получить через внешний JSON-файл. Ниже мой код & есть выход:Извлечь внешний файл json через Angular JS

index.html

<!doctype html> 
<html ng-app="MyInfo"> 
<head> 

    <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
    <script src="js/controllers.js" type="text/javascript" ></script> 

</head> 
<body> 

<div ng-controller="MyInfoFunction"> 
    <ul> 
    <li ng-repeat="item in myinfoVariable"> 
      <div> 
      <h3> {{item.name }}</h3> 
      <p> {{item.city}}</p> 
      <p> {{item.state}}</p> 
     </div> 
    </a> 
    </li> 
</div> 

</body> 
</html>

data.json - JS/data.json

[ 
     { 
      "name"  : "myname1", 
      "city": "mycity1", 
      "state" : "mystate2" 
     }, 
     { 
      "name"  : "myname2", 
      "city": "mycity2", 
      "state" : "mystate2" 
     }, 
     { 
      "name"  : "myname3", 
      "city": "mycity3", 
      "state" : "mystate3" 
     } 
]

controllers.js: JS/controllers.js

var nameSpace = angular.module("MyInfo", []); 

nameSpace.controller("MyInfoFunction", function MyInfoFunction($scope, testService) { 

    function Init() { 
     $scope.data = {}; 
     testService.getData().then(function(data) { 
      console.log(data)   
     }); 
    } 
    Init(); 
}); 


nameSpace.service('testService', function ($http) { 
    this.getData = function() { 
     return $http.get('js/data.json'); 
    } 
});

Выход:

{{}} item.name

{{}} item.city

{{}} item.state

Я попробовал fetc ч, но не удалось получить данные. Что я делаю неправильно, пожалуйста, помогите.

источник

2014-12-10 veera

ваш контроллер грязный и неправильно, дополнительные } & )

nameSpace.controller("MyInfoFunction", function MyInfoFunction($scope, testService) { 

    function Init() { 
     $scope.data = {}; 
     testService.getData().then(function(data) { 
      $scope.myinfoVariable = data.data; 
     // console.log(data)   
     }); 
    } 
    Init(); 
});

ваш .json должен быть как

[ 
{"name":"a","city":"b","state":"c"}, 
{"name":"x","city":"y","state":"z"} 
]

если ваш файл data.json находится в внутри папки js то получение JSON должен

this.getData = function() { 
    return $http.get('js/data.json'); 
}

источник

2014-12-10 10:42:50

Попробуйте, чтобы вы были отправлены. Отображается пустой экран. – veera

Это означает, что ваша угловая часть работает, проверяют, поступают ли данные? –

данные не поступают @KalhanoToressPamuditha. Только один пустой экран. – veera

Вы должны попытаться получить js/data.json вместо data.json.

nameSpace.service('testService', function ($http) { 
    this.getData = function() { 
     return $http.get('js/data.json'); 
    } 
});

Необходимо указать URL-адрес относительно вашего index.html.

При размещении приложения на http://myapp.com, а файл JSON вам необходимо размещается на http://myapp.com/js/data.json, то вы можете сделать $http.get("js/data.json") либо $http.get("http://myapp.com/js/data.json"). Однако, если ваш файл JSON размещен на другом веб-сайте, скажем http://mysecondapp.com, то вам нужно сделать $http.get("http://mysecondapp.com/data.json")

источник

2014-12-10 10:33:57 GeoffreyB

благодарит @GeoffreyB. Что означает «нужно указать URL-адрес относительно index.html». – veera

Вам необходимо указать URL-адрес, откуда он может быть доступен, если вы откроете его в своем браузере. – GeoffreyB

вы имеете в виду, что мне нужно поместить весь путь или скопировать весь путь из браузера. – veera

Извлечь внешний файл json через Angular JS

ответ

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