AngularJS http get method not returning JSON data?

Question

I have a server set up on localhost:5000 that has a JSON string that contains "Hello world"

I want my AngularJS application to fetch this data, and display it.

here is what I have.

this is the script getJSON.js

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "localhost:5000"
    }).then(function mySuccess(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});

this is how I call it in my html

<div ng-app="myApp" ng-controller="myCtrl">

    <p>Today's welcome message is:</p>
    <h1>{{myWelcome}}</h1>

</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http.get("localhost:5000")
            .then(function(response) {
                $scope.myWelcome = response.data;
            });
    });
</script>

now the "myWelcome" should be "Hello world" but it just displays myWelcome when I run the code.

the backend is fully working! I've done it with regular Angular but need it to work with AngularJS unfortunately.

Any advice?

Write a function on your $scope inside the first controller then from your view call that $scope function to run your http request. Also remove all the code inside your script tags in your view. That's just redefining what you already have which is going to cause issues. — Mickers
– Mickers, Commented Oct 2, 2019 at 13:54
@Mickers can you explain what you mean I thought it was already a function? and I just call it with {{myWelcome}} since thats the variable in the $scope ? — stack flow
– stack flow, Commented Oct 2, 2019 at 14:09

Mickers · Accepted Answer · 2019-10-02 14:35:04Z

This is not a full answer I see what you're trying to do. It looks like you're not calling the correct controller and your value never gets updated. Move your app definition into your script tags and remove the controller that you have there

//index.html
<script>
    var app = angular.module('myApp', []);
</script>


// myCtrl.js
app.controller('myCtrl', function($scope, $http) {
    $scope.myWelcome = 'test';
    $http({
       method : "GET",
       url : "localhost:5000"
    }).then(response) {
       $scope.myWelcome = response.data;
    }, catch(error) {
       $scope.myWelcome = error;
    });
});

Next check your network tab and see if the request is actually executed. If it is not then you're controller is not connected to the app properly. You should be able to set breakpoints at this time and see what is firing and what is not.

EDIT: Also make sure you're loading your js file into your view after the first script tag is fired. Otherwise 'app' will not be defined.

Collectives™ on Stack Overflow

AngularJS http get method not returning JSON data?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related