I am new to Angular js. I am using version 1.6.
I am trying to read data from a local json file using a factory to display information. I keep getting this error:
plotFactory.getPlots(...).then(...).erroris not a function
My local file structure is
App/scripts/data/plots.json
App/scripts/app.js
App/scripts/main.controller.js
App/scripts/plot.factory.js
App/index.html
main.controller.js
angular
.module('myApp')
.controller('mainController',function ($scope, $http, plotFactory) {
$scope.plots = [];
//Method 1
plotFactory.getPlots().then(function successCallback (resp) {
console.log("If you reading this , momma we made it.")
$scope.plots = resp.data;
}).error(function (error) {
console.log(error)
});
});
plot.factory.js
angular
.module('myApp')
.factory('plotFactory', function($http) {
function getPlots() {
return $http.get('data/plots.json');
}
return {
getPlots: getPlots
}
});
index.html
<body ng-app="myApp" ng-controller="mainController">
<a class="accessibility" href="#main-content" accesskey="S">Skip to Content</a>
<div class="loading-screen">
<img src="_assets/images/pentair_logo.png" width="359" height="100" alt="Emerson" />
</div>
<div id="wrapper">
<header>
<div class="container-fluid">
<a href="#" class="logo"><img class="logoimg" src="_assets/images/pentair_logo.png" alt="Pentair" /><span>Interactive Sales Presentation</span></a>
<a href="#" class="menu-opener pull-right"><span></span></a>
</div>
</header>
<div class="menu-wrapper">
<div class="mobile-menu">
<ul class="collapsible">
<li ng-repeat="mobileMenu"><a href={{mobileMenu.url}}>{{mobileMenu.name}}</a></li>
</ul>
</div>
</div>
<div class="main-content">
<div class="container-fluid">
<div class="content-wrapper">
<img src="_assets/images/ui/Main_Background_edit.jpg" class="map-overlay" width="1024" height="768" alt="Oil and Gas" />
<div class="map-wrapper">
<div class="map-control level-01 panzoom">
<img src="_assets/images/ui/Main_Background_edit.jpg" class="map-bg" width="1024" height="768" alt="Oil and Gas" />
<div class="overlay"></div>
<!-- All Map Points -->
<div ng-repeat="plot in plots">
<a href={{plot.url}} class="plot level1 arrow-head flip {{plot.sid}}"><div><span class="title">{{plot.name}}</span><span class="number">+</span></div></a>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="container-fluid">
Footer
</div>
</footer>
</div>
<!-- Load Angular Dependencies -->
<!-- Async load of Javascript -->
<script type="text/javascript">
function loadJS(e) { var t = document.createElement("script"); t.type = "text/javascript", t.async = !0, t.src = e; var n = document.getElementsByTagName("head")[0]; n.appendChild(t) };
loadJS('_assets/js/all.min.js');
</script>
<!-- In case javascript is disabled -->
<noscript>
<script type="text/javascript" src="_assets/css/all.min.js"></script>
</noscript>
<!-- Main App -->
<script type="text/javascript" src="Angular/angular.min.js"></script>
<script src="Angular/angular-route.min.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/plot.factory.js"></script>
<script src="scripts/main.controller.js"></script>
</body>
I have tried a few different paths none work. My data WILL read however if I leave the json data as a variable inside my factory... but I am trying to separate data from controllers for good practice. My guess is that the function is causing error: not a function because of the path not returning anything valid, thus failing the cued up .then function. Is it the file path in my factory's $http.get() request? Or am I missing something else?
updated the get function and callbacks.
plotFactory.getPlots().then(function successCallback(response) {
//this callback will be called asynchronously
//when the response is available
$scope.plots = response.data;
console.log("Method 2 worked!")
},function errorCallback(response) {
console.log("We got a problem...")
});
Still getting a 404 not found for data/plots.json.
Could this be reference error?
