Angular JS - Cannot read local JSON file

Question

Before my query worked in a sample 1 page(index.html) project but this time , i am working on a project which have tabs(i created project by Ionic Lap with tabs). And i need to print output of JSON file in tab-home.html page. Which not in same local of JS and index.html.

Tab pages are in /Template folder (tabs.html,tab-home.html,tab-account.html) JS are in /JS folder (app.js,controllers.js,services.js and employees.json)

Here is my codes

in controllers.js

.controller('HomeCtrl', function($scope, webtest) {
    webtest.fetch().then(function(data) {
        $scope.data = data;
    })
})

in services.js

.factory('webtest', function($q, $timeout, $http) {
    var Webtest = {
        fetch: function(callback) {
            return $timeout(function() {
                return $http.get('employees.json').then(function(response) {
                    return response.data;
                });
            }, 30);
        }
   };

   return Webtest;
});

in tab-home.html

<ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="item in data">

    <h2>{{item.product_name}}</h2>   
</ion-item>

I didn't touch app.js and index.html. They have default codes.

Thanks everyone, Mehmet.

I see localhost:8101/employees.json 404 (Not Found) error in console but this error removed when i updated this part like $http.get('js/employees.json').then(function(response) (used js/employees.json instead of employees.json). Even it didn't return any error now , i don't see data. — arslan
– arslan, Commented Apr 13, 2016 at 12:25
Can you put it in a pluker? So it is easy to help you. One thing, you are returning the "then()" function not the promisse when you call "webtest.fetch()". You should return only "return $http.get('employees.json')" and then use the "then()" to handle the http response in your HomeCtrl controller. — Bruno João
– Bruno João, Commented Apr 13, 2016 at 12:37
Here two thgins to tries : init $scope.data = [];If it's not that try put your data in a object like $scope.context = {data:[]}; .... $scope.context.data = data; — Walfrat
– Walfrat, Commented Apr 13, 2016 at 12:53

EL missaoui habib · Accepted Answer · 2016-04-13 12:38:19Z

2

your response should be like {"data": {....

if no :

 return $http.get('employees.json').then(function(response) {
                return response;
            });

answered Apr 13, 2016 at 12:38

EL missaoui habib

1,0752 gold badges14 silver badges24 bronze badges

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

Comments

Mark Evaul · Accepted Answer · 2016-04-13 12:09:51Z

0

Are you trying to do this directly off your hard drive? Like the url in the address bar is file://yadda-yadda-yadda? If so, ajax doesn't work on local files. You need to run off a webserver. WAMP (http://www.wampserver.com/en/) is a project to quickly set up a local web server on windows if that is your operating system.

answered Apr 13, 2016 at 12:09

Mark Evaul

6535 silver badges11 bronze badges

1 Comment

arslan Over a year ago

no , i serve it by Ionic lap or serve it by cmd (ionic serve android)

Collectives™ on Stack Overflow

Angular JS - Cannot read local JSON file

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related