$http is not defined

Question

I am new to Angular JS and have getting below error when I have tried to inject $http service in the project. Please see the code file below.

As you can see I have created a <ng-app="myapp"> and created a controller for the same. As described in the tutorial I have registered the controller in the View.js and tried to load 'data.json' file data. However, during running the program I am getting error as $http is not defined.

View.html

 <!DOCTYPE html>
<html lang="en">
<head>
<script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script src="js/View.js"></script>
</head>

<body ng-app="myapp">

    <div ng-controller="Object">
        <span ng-bind="o.rollNo"></span>
        <span ng-bind="o.firstName"></span>
        <span ng-bind="o.middleName"></span>
        <span ng-bind="o.lastName"></span>
        <span ng-bind="o.className"></span>
        <span ng-bind="o.schoolName"></span>
    </div>
</body>
</html>

View.js

var app=angular.module("myapp", []);
app.controller('Object',function($scope,$http) {

    $http.get("data.json")
    .success( function(response) {
        $scope.o= response;
       });

});

data.json:

[
   {
      "rollNo" : "1",
      "firstName" : "ABC",
      "middleName" : "DEF"
      "lastName" : "HIJ"
      "className" : "First"
      "schoolName" : "CRB"
   }
]

Project Structure

Are you using any minification? That will break implicit annotations. — ekuusela, Jan 25 '16 at 14:29
Could you pleas post console output? I don't see any issue with $http — Pratap A.K, Jan 25 '16 at 14:33
@amanpurohit: Tried..no luck. The problem is not with the JS file since I am able to reach it during running it in debug mode (Using browser). — Damon, Jan 25 '16 at 14:52
@shushanthp: I have heard about fiddle but have not used. Will have a look of the link provided. thank you for the link. — Damon, Jan 25 '16 at 14:53
@Damon: have you tried putting it just before the closing `
` tag? — serv-inc, Jan 25 '16 at 14:56

Pratap A.K · Accepted Answer · 2016-01-25T15:12:42.093

1

No problem with your code, it's working properly.

Since you have only 1 object, you need to get values based on index i.e o[0].rollNo

<body ng-app="myapp">

    <div ng-controller="Object">
        <span ng-bind="o[0].rollNo"></span>
        <span ng-bind="o[0].firstName"></span>
        <span ng-bind="o[0].middleName"></span>
        <span ng-bind="o[0].lastName"></span>
        <span ng-bind="o[0].className"></span>
        <span ng-bind="o[0].schoolName"></span>
    </div>
</body>

Controller

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

app.controller('Object',function($scope,$http) {    
     $http.get('data.Json').
        success(function(data, status, headers, config) {
            alert("Success");
          $scope.o = data;
        }).
        error(function(data, status, headers, config) {
            alert("Error");
          // log error
        });

});

data.Json

You need to add comma between each key:value

[
   {
      "rollNo" : "1",
      "firstName" : "ABC",
      "middleName" : "DEF",
      "lastName" : "HIJ",
      "className" : "First",
      "schoolName" : "CRB"
   }
]

As per your project structure, your json file path(js/data.json)

$http.get('js/data.Json').
        success(function(data, status, headers, config) {
            alert("Success");
          $scope.o = data;
        }).
        error(function(data, status, headers, config) {
            alert("Error");
          // log error
        });

edited Jan 25 '16 at 15:12

answered Jan 25 '16 at 14:40

Pratap A.K

4,337
11
42
79

Thank you for the response. regarding o[0].rollNo..It was a genuine mistake, I have corrected it. However, still can see the page as blank. Did the modification in the JS file as you have suggested, It is going to the error part. – Damon Jan 25 '16 at 14:55
1

Going to error part means, you don't have any issues with $http. You need to reference location of .Json file properly. Can you let us know where you kept data.Json? – Pratap A.K Jan 25 '16 at 14:58
Have edit the question. Please have a look at the folder structure. – Damon Jan 25 '16 at 15:06
@Damon : I got why its going to error part, your json file name is "data.Json" and your doing $http.get('data.json') which is wrong. Change small "j" to caps "J" – Pratap A.K Jan 25 '16 at 15:06
Sorry That was a typo during writing of the question. On both the places It is '.json; only. editing the question. – Damon Jan 25 '16 at 15:08
@Damon Change $http.get('data.json') to $http.get('js/data.json') it will work – Pratap A.K Jan 25 '16 at 15:10
@Damon : Take a look at this plunker https://plnkr.co/edit/is4i4ra1MHQJdzBxfF3w?p=info – Pratap A.K Jan 25 '16 at 15:20
Had a look at the plunker. It is working fine. It means my code is correct. However, still wondering why it is not working on my machine. Anyway will create a new project and will apply luck there. Thank you for the help. I am accepting your answer. It would be great if you tell me any tool that can be used for debugging. As of now I am using browser for the debugging. – Damon Jan 25 '16 at 15:26
Take a look http://fredsarmento.me/frontend-tools/ Browser console with console.log or alert statement is fine to debug application flow. I wonder why you didn't update your json file. It's still missing "comma" between key:value pair. May be because of that its going to error part – Pratap A.K Jan 25 '16 at 15:30
1

warning! The success and error for $http are dépréciated, use then instead! see official doc – AlainIb Jan 27 '16 at 06:54
@PratapA.K : Worked like a charm! Thank you. – Damon Jan 27 '16 at 15:42
@Alaninlb: Thank you for the information. I am still in the learning phase. – Damon Jan 27 '16 at 15:42

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

Since this was not yet mentioned in an answer, only in two comments:

You might need to move the line

<script src="js/View.js"></script>

to the bottom

    <span ng-bind="o[0].schoolName"></span>
    </div>
    <script src="js/View.js"></script>
</body>
</html>

... see also @Pratap's answer concerning the JSON file.

edited May 23 '17 at 12:15

Community

1
1

answered Jan 25 '16 at 14:53

serv-inc

35,772
9
166
188

No need to reference View.js below... As per his latest comment below my answer, $http.get going to error part, that means he need to refer location of Json file properly and nothing wrong with $http injection. – Pratap A.K Jan 25 '16 at 15:02
@PratapA.K: it seems common practice. What happens if the angular.js file takes longer to load than the View.js? – serv-inc Jan 25 '16 at 15:41
1

Good point, then it will throw error like "Uncaught ReferenceError: angular is not defined" , [$injector:modulerr] Failed to instantiate module myapp, but it won't complaint about $http dependency injection. – Pratap A.K Jan 25 '16 at 16:36

score -1 · Answer 3 · answered Jan 25 '16 at 14:26

Try this:

var app=angular.module("myapp", []);
app.controller('Object', objectCtrl);
objectCtrl.$inject = ['$scope', '$http'];
function objectCtrl($scope, $http){

   $http.get("data.json")
     .success( function(response) {
         $scope.o= response;
   });


}

$http is not defined

3 Answers3

Linked