Why is it that the data from the $http service cannot be obtained?

Question

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>First AngularJS Application</title>
    <script src="scripts/angular.js"></script>

</head>
<body ng-app = "myAngularApp">
<div>
        <div ng-controller="myController">
            Response Data: {{data}} <br />
            Error: {{error}}
        </div>
    </div>
    <script>
        var myApp = angular.module('myAngularApp', []);

        myApp.controller("myController", function ($scope, $http) {

            var onSuccess = function (data, status, headers, config) {
                $scope.data = data;
            };

            var onError = function (data, status, headers, config) {
                $scope.error = status;
            }

            var promise = $http.get("index.html");

            promise.success(onSuccess);
            promise.error(onError);

        });
    </script>
</body>

This is the html file and when I load the page the data were not retrieved. I'm not sure if I have some little mistakes since I copy pasted it in the tutorial. This will be the output.

Folder Structure

your angular file is present on this location in your project scripts/angular.js ??? — Vishvadeep singh, Jul 18 '17 at 06:09
Yeah it is. I already tried with angular js events and it's working but I'm having trouble with this one — JJJ, Jul 18 '17 at 06:11
Show your folder structure and what version of angular are you using? — Vivz, Jul 18 '17 at 06:12
@Vivz yeah but it's still not working. I have downloaded 1.6.x version of angular.js. I don't know if the service is supported in that version — JJJ, Jul 18 '17 at 07:10

Vivz · Accepted Answer · 2017-07-18T07:15:52.770

The script tag is wrong in your case. You are using lowercase in your code but your folder structure shows uppercase Scripts

<script src="Scripts/angular.js"></script>

Update If you are using latest version of angularjs, try the below code since success and error are deprecated.

 var myApp = angular.module('myAngularApp', []);

        myApp.controller("myController", function ($scope, $http) {

            var onSuccess = function (data) {
                $scope.data = data.data;
            };

            var onError = function (data) {
                $scope.error = data;
            }

            var promise = $http.get("index.html");

            promise.then(onSuccess);
            promise.catch(onError);

        });

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

Ali Uzair · Answer 2 · 2017-07-18T06:37:36.657

-1

Use then rather than success and use catch rather than error

Example:

<div>
    <div ng-controller="myController">
        Response Data: <span ng-bind-html="data"></span> <br />
        Error: {{error}}
    </div>
</div>
<script>
    var myApp = angular.module('myAngularApp', []);

    myApp.controller("myController", function ($scope, $http, $sce) {

        var onSuccess = function (data, status, headers, config) {
            $scope.data = $sce.trustAsHtml(data.data);
        };

        var onError = function (data, status, headers, config) {
            $scope.error = data;
        }

        var promise = $http.get("index.html");

        promise.then(onSuccess);
        promise.catch(onError);

    });
</script>

edited Jul 18 '17 at 06:37

answered Jul 18 '17 at 06:19

Ali Uzair

36
5

`success`, and `error` are completely valid unless the Angular version is specified by OP. – 31piy Jul 18 '17 at 06:29
I have updated code to show html... used **$sce.trustAsHtml** and **ng-bind-html** – Ali Uzair Jul 18 '17 at 06:38
you can see [official documentation](https://docs.angularjs.org/api/ng/service/$sce) of **$sce** [here](https://docs.angularjs.org/api/ng/service/$sce) – Ali Uzair Jul 18 '17 at 06:45
No data value and error value can be seen. Output in the page is just: Response Data: Error: – JJJ Jul 18 '17 at 06:56
on view side you have to use **** and in controller inject **$sce** and then mark response data as trusted html **$sce.trustAsHtml(data.data);** – Ali Uzair Jul 18 '17 at 06:59
One more thing to be noted... You have currently opened index.html file. and again you are loading index.html file. I will suggest you to create another html file and request it... – Ali Uzair Jul 18 '17 at 07:05
Here is working [plunkr ...http://plnkr.co/edit/CxuMx8XuVzoUOS1RGMiT?p=preview](http://plnkr.co/edit/CxuMx8XuVzoUOS1RGMiT?p=preview) – Ali Uzair Jul 18 '17 at 07:22

Why is it that the data from the $http service cannot be obtained?

2 Answers2