TypeError: Cannot set property 'description' of undefined when using angularjs $http get request

Question

I have a controller that get info from user and find the perfect fruit for him. If in my json file there isn't a description of the fruit, it will get it from wikipedia (wikimedia api).

The issue is that I'm not able to attach the promise to the description variable.

I would appriciate it it you could take a look,

Thanks

    app.controller('fruitsCtrl', ['$scope', '$http', 'preferences', function ($scope, $http, preferences) {

    $scope.preferences = preferences; //what kind of fruits preferences the user have

    // local json files that has info about certain fruits
    $http.get("partials/fruits.json").then(function(response) {
        $scope.data = response.data; // Question -> is this good practice???
        $scope.fruits = {};

    // look at json file for fruits that correspond the preferences
        for (i = 0; i < $scope.preferences.length; i++) {
            for (l = 0; l < $scope.data.length; l++) {
                if($scope.data[l].fruitProperties.indexOf($scope.preferences[i]) > -1){
                    // add this fruit details to the fruits object
                    $scope.fruits[l] = $scope.data[l];
    // if description of fruit is not in json file it 
    // will have a var - "wikiname" to get it from wikimedia API
                    if ($scope.fruits[l].description === undefined){
                        var wiki = $scope.fruits[l].wikiName;
                        // with wikimedia I can use only $http and not $http.get
                        $http({
                            url: $scope.url = "https://en.wikipedia.org/w/api.php?format=json&callback=JSON_CALLBACK&action=query&prop=extracts&exintro=true&titles="+wiki,
                            method: 'jsonp'
                        }).success(function(response) {
                            for(var id in response.query.pages) {
                                $scope.fruits[l].description = response.query.pages[id].extract;
                            }
                        });

                    }
                }
            }
        }
    }, function () {
        $scope.sites = [{action: "Error"}] //add somthing in case of error
    });
}]);

in this line = $scope.fruits[l].description = response.query.pages[id].extract; — bob, Jul 05 '15 at 14:22
According to your error $scope.fruits[l] is undefined, so the problem isn't that you can't set the promise to the description variable. It's that $scope.fruits[l] is undefined. — Chrillewoodz, Jul 05 '15 at 14:28
but it is defined. if I write console.log($scope.fruits[l]) before the $http({ line, i get it logged to the console and it is defined. — bob, Jul 05 '15 at 14:31
The error says otherwise. What if you console.log the object inside the .success function? — Chrillewoodz, Jul 05 '15 at 14:32
in this case it will log that it is undefined - I don't understand why it is suddenly undefined — bob, Jul 05 '15 at 14:33
http://stackoverflow.com/questions/30935277/how-to-get-data-from-mediawiki-api-using-angularjs — bob, Jul 05 '15 at 14:47
Ah, the infamous ACAO error.. I'm not sure why it becomes undefined in the .success call, sorry — Chrillewoodz, Jul 05 '15 at 14:51

tuckerjt07 · Answer 1 · 2015-07-05T19:16:14.010

I would suggest putting the get functionality into a service or factory but it will work inside of a controller.

I would suggest a two part approach. Use $templateRequest for accessing your JSON and then if there is no data perform a call to Wiki using $http.

As to the undefined error, I assume that you are attempting to assign it to an object yes? If so try instantiating it as an object before assigning.

YourVarName.prop = {};
YourVarName.prop = response;

Sorry, it just clicked that the entire object, not just the new property is undefined. The above will not work.

Have you considered using a callback function inside of the success function?

//Inside success
callback(response, l);
//End success
function callback (response, l) {
      $scope.yourproperties[l] = response;
}

By moving the assignment out of the success you may get around the issue that is causing it to be undefined.

score 0 · Accepted Answer · answered Jul 18 '15 at 16:07

This is how I solve it:

app.controller('fruitsCtrl', ['$scope', '$http', 'preferences', function ($scope, $http, preferences) {

$scope.preferences = preferences; //what kind of fruits preferences the user have

// local json files that has info about certain fruits
$http.get("partials/fruits.json").then(function(response) {
    $scope.data = response.data; // Question -> is this good practice???
    $scope.fruits = {};

// look at json file for fruits that correspond the preferences
    for (i = 0; i < $scope.preferences.length; i++) {
        for (l = 0; l < $scope.data.length; l++) {
            if($scope.data[l].fruitProperties.indexOf($scope.preferences[i]) > -1){
                // add this fruit details to the fruits object
                $scope.fruits[l] = $scope.data[l];
                getMissingFruitsDescriptionFromWiki($scope.fruits, l);
                }
            }
        }
    }
}, function () {
    $scope.sites = [{action: "Error"}] //add somthing in case of error
});

function getMissingFruitsDescriptionFromWiki (fruits, l) {
// if description of fruit is not in json file it 
// will have a var - "wikiname" to get it from wikimedia API
    if ($scope.fruits[l].description === undefined){
                            var wiki = $scope.fruits[l].wikiName;
                            // with wikimedia I can use only $http and not $http.get
                            $http.jsonp("https://en.wikipedia.org/w/api.php?format=json&callback=JSON_CALLBACK&action=query&prop=extracts&exintro=true&titles=""https://en.wikipedia.org/w/api.php?format=json&callback=JSON_CALLBACK&action=query&prop=extracts&exintro=true&titles="+wiki).success(function(response) {
                                for(var id in response.query.pages) {
                                    $scope.fruits[l].description = response.query.pages[id].extract;
                                }
                            });
    }
}]);

TypeError: Cannot set property 'description' of undefined when using angularjs $http get request

2 Answers2