Fetch the external json file through Angular JS

Question

I have try to fetch the json data by using Angular JS. I have successfully fetch through static json data. But now I have try to fetch through external JSON file. Below is my code & there output :

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');
    }
});

Output :

{{item.name }}

{{item.city}}

{{item.state}}

I have try to fetch but unable to get the data. What am I doing wrong please help.

Kalhan · Accepted Answer · 2014-12-10 11:03:11Z

4

your controller is messy and incorrect, extra } & )

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

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

your .json should be like

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

if your data.json file is in inside of the js folder then the getting json should be like

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

edited Dec 10, 2014 at 11:03

answered Dec 10, 2014 at 10:42

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Kalhan Over a year ago

that means your angular part is working check whether data is coming ?

veera Over a year ago

no data is not coming @KalhanoToressPamuditha. Same blank screen showing only.

veera Over a year ago

Please help to find out I am unable to fetch my json data.

veera Over a year ago

page loads only, unable to see that demo.

Kalhan Over a year ago

oh there is a problem with plunker. it will work after sometime. i update the answer please check.

|

GeoffreyB · Accepted Answer · 2014-12-10 10:52:36Z

1

You should try to get js/data.json instead of data.json.

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

You need to provide the url relative to your index.html.

If you are hosting your application on http://myapp.com, and the json file you need to get is hosted on http://myapp.com/js/data.json then you can either do $http.get("js/data.json") either $http.get("http://myapp.com/js/data.json"). However, if your json file is hosted on another website, let's say http://mysecondapp.com, then you need to do $http.get("http://mysecondapp.com/data.json")

edited Dec 10, 2014 at 10:52

answered Dec 10, 2014 at 10:33

GeoffreyB

1,8394 gold badges21 silver badges36 bronze badges

6 Comments

veera Over a year ago

thanks @GeoffreyB. What do mean by "need to provide the url relative to index.html."

GeoffreyB Over a year ago

You need to provide the url from where it can be accessed if you were to open it on your browser.

veera Over a year ago

you mean that I have to put whole path or copy the whole path from browser.

veera Over a year ago

Thanks but my data is not in host. Data is in my local machine (i.e. Desktop)

veera Over a year ago

I have a folder named AJExample. Inside them my index.html is situated & my js folder. Inside Js folder my json file & controllers.js file are there.

|

Collectives™ on Stack Overflow

Fetch the external json file through Angular JS

2 Answers 2

12 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related