Parameter is not recognised by the function in .then angularjs

Question

What I am trying to achieve is a dropdown list that produces lisof Metacategories. Once the user selects the meta category, the parameter should be passed onto the URI of the function present in $scope.meta().then(...). however, the parameter I am passing is category; ng-model="category". This parameter is not sent to the URI, I am getting an error:

TypeError: Cannot read property 'category' of undefined

HTML:

 </select></center >
<center> <select ng-model="category"  > <!-- This produces drop down list from which the users selects a category which should then get passed to the meta1() function as a parameter to produce a further list for the drop down after that-->
<option size=50 value="" selected>Select a meta category</option>
 <option ng-repeat="meta in metas.metas" value="{{meta}}">{{meta}} </option>

</select></center>
<center> <select ng-model="category"  >
<option size=50 value="" disabled selected>Select a category</option>
 <option ng-repeat="category in categories.categories" value="{{category}}">{{category}} </option>

 </select></center>

Angular:

myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/post', {
    templateUrl: 'templates/post.html',
    controller: 'PostCtrl'
})
}])
.controller('UserListCtrl', function ($scope, $http) {
$scope.list = function () { // this gets the list of places which works completely fine.
    $http.get('http://94.125.132.253:8001/getuncategorisedplaces').success(function (data) {

        $scope.places = data;
        console.log(data);
        $scope.message = 'List of Uncategorised places';
        $scope.meta = function () { // this gets list of meta categories, which is working fine.
            return $http.get('http://94.125.132.253:8000/getmetas').success(function (data) {

                $scope.metas = data;
                console.log(data);
                $scope.message = 'List of Uncategorised places';
            })
        }

// the function below should get a parameter category from previous function which is selected in HTML. Once this happens, the parameter category should be passed on as formdata.category(below) which will get the list of categories.

        $scope.meta().then(function (data) {
            var formdata = {
                'category': this.category,
            }
            var inserturl = 'http://94.125.132.253:8000/getcategories?meta=' + formdata.category;
            $http.get(inserturl).success(function (data) {

                $scope.categories = data;
                console.log(formdata.category);
                console.log(data);
                $scope.message = 'List of Uncategorised places';
            });


        });
    })
}
$scope.list();

Here is a tip: Format the codes to have a proper indentation so that it is readable and attract people eyes to come and help! — runTarm
– runTarm, Commented Jul 22, 2014 at 10:25
Your $scope.meta function doesn't look like it's returning anything, but you're trying to call .then on the result of calling it. — Anthony Grist
– Anthony Grist, Commented Jul 22, 2014 at 10:25
oh how do I fix it. I have not used .then before but I want meta1() to be called after meta is called and one of the options has been selected to pass the parameter — butYouDontLookLikeADeveloper
– butYouDontLookLikeADeveloper, Commented Jul 22, 2014 at 10:30
I would suggest you to create a workable plunkr or jsfiddle to ease others to solve your problem — hutingung
– hutingung, Commented Jul 22, 2014 at 11:38

Edminsson · Accepted Answer · 2014-07-22 14:36:27Z

1

I would think that the error is caused by this:

$scope.meta().then(function meta1($scope,$http) {

because the meta method is not returning a promise. The meta method could return a promise if you did this:

$scope.meta= function(){
  return $http.get('http://94.125.132.253:8000/getmetas').success(function (data) {
    $scope.metas = data;
    console.log(data);
    $scope.message = 'List of Uncategorised places';
    return data;
  });
};

and you could change the call to meta to this

$scope.meta().then(function(data) {
...
}

edited Jul 22, 2014 at 14:36

answered Jul 22, 2014 at 10:36

Edminsson

2,51422 silver badges25 bronze badges

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

Comments

AlwaysALearner · Accepted Answer · 2014-07-22 11:39:01Z

0

Missing return.

$scope.meta should return a promise for you to be able to use .then()

$scope.meta= function(){
    return $http.get('http://94.125.132.253:8000/getmetas').success(function(...
        ...
}

$scope.meta().then(function (data) {
    // do something with data
});

edited Jul 22, 2014 at 11:39

answered Jul 22, 2014 at 10:55

AlwaysALearner

43.9k9 gold badges98 silver badges78 bronze badges

16 Comments

butYouDontLookLikeADeveloper Over a year ago

This has stopped the error however, the code still does not work. It does not display the data that should come from second URI getcategories

AlwaysALearner Over a year ago

Take a look at the edit. You should make the second call inside the callback.

butYouDontLookLikeADeveloper Over a year ago

yes that did help, however, now the problem has occured that it does not recognise the parameter which has been passed from the previous function which is meta.

butYouDontLookLikeADeveloper Over a year ago

I have all the original code in here, I have not used jsfiddle before but I have put the code together if that helps

AlwaysALearner Over a year ago

Update your question to make it more clear and explain what you're trying to achieve. Currently it doesn't make much sense.

|

Collectives™ on Stack Overflow

Parameter is not recognised by the function in .then angularjs

2 Answers 2

Comments

16 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

16 Comments

Your Answer

Sign up or log in

Post as a guest

Related