I previously had success with my query in a one-page sample project (index.html), but now I am working on a project with tabs (I created the project using Ionic Lab with tabs). I need to display the output of a JSON file on the tab-home.html page, which is not in the same location as the JS and index.html files.
The tab pages are located in the /Template folder (tabs.html, tab-home.html, tab-account.html) while the JS files are in the /JS folder (app.js, controllers.js, services.js, and employees.json).
Here are 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 haven't made any changes to app.js and index.html. They remain with default code.
Thank you all, Mehmet.