$http is breaking my angular controller

Question

I can create a simple variable with text and display it just fine, but if I use

$http.get()

It breaks my controller and nothing gets displayed on screen.

Here is my index.html file.

<!DOCTYPE html>
<html ng-app="ietm">

<head>
    <link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.min.css" />
    <script type="text/javascript" src="node_modules/angular/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
</head>

<body ng-controller="IetmController">
    <!--  TOC Header  -->
    <header>

    </header>

    <!--  Manuals Container  -->
    <div class="list-group">
        <div class="list-group-item" ng-repeat="manual in toc.manuals">
            <h3>{{manual.title}} <em class="pull-right">{{manual.tm}}</em></h3>
        </div>
    </div>
</body>

</html>

Here is my app.js file

(function() {
    var app = angular.module('ietm', []);

    app.controller('IetmController', ['$http', function($http) {
        var toc = this;
        toc.manuals = [];
        $http.get('main-TOC.json').success(function(data) {
            toc.manuals = data;
        });
    }]);
})();

And if it matters, here is my JSON

[{
        "docid": "TO2JF11031",
        "location": "2j-f110-3-1",
        "file": "2jf11031.sgm",
        "tm": "2J-F110-3-1",
        "title": "General Information",
        "update": "Thu Jul 7 12:39:17 EDT 2016"
    },
    {
        "docid": "TO2JF11032",
        "location": "2j-f110-3-2",
        "file": "2jf11032.sgm",
        "tm": "2J-F110-3-2",
        "title": "Support Equipment",
        "update": ""
    },
    {
        "docid": "TO2JF11033",
        "location": "2j-f110-3-3",
        "file": "2jf11033.sgm",
        "tm": "2J-F110-3-3",
        "title": "Disassembly",
        "update": "Thu Jul 7 12:39:18 EDT 2016"
    }
]

What's the error? I think you cant GET a json file like that. — yBrodsky, Feb 17 '17 at 15:35
Don't use success(). It's deprecated for a long time in 1.5.x, and removed in 1.6.x. Use then(), as for any promise. Read the $http documentation. — JB Nizet, Feb 17 '17 at 15:36
Possible duplicate of [Why are angular $http success/error methods deprecated? Removed from v1.6?](http://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6) — Claies, Feb 17 '17 at 15:43

score 2 · Answer 1 · edited May 23 '17 at 12:09

2

Try this:

$http.get('main-TOC.json')
.then(function success(response) {
    toc.manuals = response.data;
}, function error(response) {
    // your code when http get fails (optional)
});

The reason is .success() method for .get() was deprecated v1.5 and is no longer available since v1.6. For more information, checkout the following question:

Why are angular $http success/error methods deprecated? Removed from v1.6?

edited May 23 '17 at 12:09

Community

1
1

answered Feb 17 '17 at 15:37

Pejman

1,328
1
18
26

I tried this and I get "XMLHttpRequest cannot load file:///J:/Neil/AngularIETM/main-TOC.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource." – xRuhRohx Feb 17 '17 at 15:46
@xRuhRohx you need to serve your app from a web server, and access it using the http protocol, in order to be able to use $http. Not from the file system. – JB Nizet Feb 17 '17 at 15:47
Is there any way to do it without a server? – xRuhRohx Feb 17 '17 at 15:48
@xRuhRohx No, there isn't any. – JB Nizet Feb 17 '17 at 17:28

score 0 · Accepted Answer · answered Feb 17 '17 at 15:52

first as mention in the comments, remove the success and add then to catch the response.

$http.get('main-TOC.json')
    .then(function(response) {
        toc.manuals = response.data;
    }, function(response) {

    });

thats solve the error. But data is still not displaying in the html. Because in your controller this is assign to variable. so you need use controller as toc in the html .

<body ng-controller="IetmController as toc">

demo

$http is breaking my angular controller

2 Answers2