0

Nooby Question here. I have test sales data in a JSON Format and want to display the data in a table using Angular JS.

Here is the Angular Code.

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

app.factory("services", ['$http', function ($http) {
var serviceBase = '/api/sales';
var obj = {};
obj.getCustomers = function () {
    return $http.get(serviceBase);
};
return obj;
}]);
app.controller('SalesDataController', function ($scope, services) {
services.getCustomers().then(function (data) {
    alert(JSON.stringify(data));
    $scope.customers = data;
});
});

I know theres better ways of doing this but im just delving into Angular... Heres my HTML..

<div ng-controller="SalesDataController">
<table class="table table-striped" >
 <tr><th>ID</th>
 </tr>
     <tr ng-repeat="a in salesData">
         <td>{{a.Index}}</td>
     </tr>

 </table>
 </div>

Ive done a test to see if angular is working and thats a winner, but the code isnt displaying anything. Exactly where am I going wrong?

Thanks

Improve this question
8
  • Do you ever reference customers in the HTML? Commented Sep 1, 2015 at 18:54
  • @tymeJV yeah. Ive changed the salesData over to customers and still not a single thing :-( Commented Sep 1, 2015 at 18:57
  • Can you post what console.log($scope.customers) looks like in your .then() Commented Sep 1, 2015 at 18:57
  • @tymeJV ok so really nooby here. help me out on the console.log?? (Maybe I should just stick to Back End development and not move into UI's) Commented Sep 1, 2015 at 19:00
  • Haha - after you assign the $scope.customers = data; call - do console.log($scope.customers) - and to see your console, press F12 (most browsers anyways) - or find it in the dev tools. It works WAAAAY nicer than alert Commented Sep 1, 2015 at 19:02

2 Answers 2

Reset to default
1

I don't see any variable named salesData in your controller, probably you need to refer it as customers in the html.

<div ng-controller="SalesDataController">
<table class="table table-striped" >
 <tr><th>ID</th>
 </tr>
     <tr ng-repeat="a in customers">
         <td>{{a.Index}}</td>
     </tr>

 </table>
 </div>

Also change your app name

From:

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

To:

var app = angular.module("SalesDataApp", []);
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

yeah jsut changed it and still nothing
console.log($scope.customers) inside your controller
Seriously nooby here at front end development... whats the console.log? Sorry. This is my first foray into front end development and Im a little out of my depth here.
ok i think its better if you create the issue in plunker or jsfiddle
just used the dev tools and this is the error I got 'app' is undefined
|
0 
var app = angular.module("SalesDataApp", []);

app.factory("services", ['$http', function ($http) {
  var serviceBase = '/api/sales';
  var obj = {};
  obj.getCustomers = function () {
    return $http.get(serviceBase);
  };
  return obj;
}]);
app.controller('SalesDataController', function ($scope, services) {
  services.getCustomers().then(function (data) {
    console.log(data); //changed
    $scope.customers = data;
  });
});

I added .json to the serviceBase string. I am making the assumption that you have the sales.json file in the correct location relative to this application. You should now see data in the console. Depending on how it is formatted in the JSON file it may now be in the UI as well. If it is not you will need to set $scope.customers properly using the data structure displayed in the console.

Improve this answer

3 Comments

sales.json file? Its an API so why does this need a json file? sorry for the stupid question but I thought API's delivered the data dynamically. I write this using Knockout and didnt need a json file here so could you please explain?
I made the assumption is was a local file. If it is a service you are good to go.
This is so frustrating!!!! I've got no console Log, No errors and its not handling my data!!! I really dont understand this at all. On IIS Express this worked fine with Knockout but now, with Angular, its not running or doing anything! How can this be?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.