0

I am trying to get a controller to retrieve its data from the server when it comes in to uses but for some reason this doesn't see to work properly:

app.controller('eventListController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    var eventList = this,
        getEventList = function () {
            var promise = $http.get('../json/Login.json');
            promise.then(function (response) {
                eventList = response.data;
            }, function (error) {
                window.alert('Error' + error);
            });
        };

    getEventList();
}]);

It seems pretty straightforward but eventList doesn't load correctly

What I am doing wrong ?

Here is roughly what the JSON looks like 

{
"eventHead": [
    {
        stuff stuff
    },
    {
         more stuff
    }
],
"success": true

}

if i do a 

window.alert(eventList);

after the

getEventList();

I get [object Object], which seems normal

but if I do 

window.alert(eventList.success);

I get undefined

and furthermore my data just doesn't load into the page

Improve this question
3
  • 1
    Doesn't work how? Throws error, doesn't contain data or what? Commented Jul 8, 2016 at 12:25
  • Open the browser console and check the error what it is showing. Try to replicate the scenario with jsfiddle, jsbin... Commented Jul 8, 2016 at 12:35
  • 3
    instead of window.alert, try using console.log(error) and then open the console (f12 in chrome) to check the error Commented Jul 8, 2016 at 12:35

3 Answers 3

Reset to default
2

You don't want to overwrite the reference from this (your controller) with the result (EDIT: What i mean is, you're not longer referencing the controller and instead just referencing the data - which will not be accessible in the view). You want to set a property on the controller - i take it you're using the controller as syntax? This would do a better job at what I think you're trying to achieve:

app.controller('eventListController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    var that = this;

    var getEventList = function () {
        var promise = $http.get('../json/Login.json');
        promise.then(function (response) {
            that.eventList = response.data;
        }, function (error) {
            console.log('Error', error);
        });
    };

    getEventList();
}]);

EDIT: It has been pointed out to me several times, that the above (question) syntax is correct. I agree - it's just bad practice. You should not be defining several variables with , and newlines. I think most javascript developers would agree that it does not add to readability (I think me mis-reading it proves that).

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

The syntax is correct and you don't override this with the result.
@Martin Perhaps my wording is a bit off, but the syntax is not correct. You can hold a reference to the controller, but you need to set the data on a property on that controller, or you won't be able to access it in the view since you will have no reference....
var a, b, c; is perfectly valid. what error do you see in this line?
I dont think the syntax is quite off, because Brackets gives me and error message if I try to use var = something two times, even if it ends up working, but ill post the solution i came up with thnaks to your answer below
@PerHornshøj-Schierbeck Even if you wanted to show it in a view you'd have to use $scope.eventList and not this.eventList
|
0

Your problem is actually well described in questions such as: How do I return the response from an asynchronous call?

Calling window.alert(eventList); does return [object Object] because you assigned it to eventList = this.

Function getEventList() is asynchronous so the response isn't available immediately. You could do:

var getEventList = function (callback) {
    var promise = $http.get('../json/Login.json');
    promise.then(function (response) {
        eventList = response.data;
        callback(eventList);
    }, function (error) {
        window.alert('Error' + error);
    });
};

getEventList(function(response) {
    console.log(response.success);
});

But rather have a look at the answer I mentioned above and see how to use Promises in Angular.

Improve this answer

1 Comment

I think you're overcomplicating it. All you have to do was set the data on either $scope if you're using scope or on a property on the controller like i described.
0

Thumbs up to Per Hornshoj-Schierbeck and Martin who set me in the right direction , this seems to work

app.controller('eventListController', ['$scope', '$http', '$routeParams', function ($scope, $http, $routeParams) {
    var events= this;

    var getEventList = function () {
        var promise = $http.get('../json/Login.json');
         promise.then(function (response) {
            events.eventList = response.data;
        }, function (error) {
            window.alert('Error' + error);
        });
     };

    getEventList();
}]);

I hope the syntax is good practice, if not ill be glad to receive any advice

Improve this answer

10 Comments

looks like i have to wait two days
About the syntax. I would put a semi-colon after this on the first line and then define a new variable for getEventList. It's easier to read when you only define one variable per line. Also loose the indent of the getEventList function. It should be on the same indent as the two other lines. Check out my response again if you want to see what i mean.
the weird thing about that is that brackets gives me a message when i try it : "combine this with the previous 'var' statement"
Also a final comment. Instead of naming your variable 'events', why not name it 'me' or 'that' - both are widely used for capturing this in a different/parent scope, which is what you're doing. It makes it very explicit what you are referencing. You could also name it 'controller' since it is the controller itself that you're holding a reference to
That is how this forum work. You mark the answer you think is the best as accepted. You can mark your own answer, but that is only done if none of the other answers prove correct. It also identifies the question as 'closed' - no need to add more answers...
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.