TypeError: Невозможно установить свойство 'description' of undefined при использовании angularjs $ http get request

Question

У меня есть контроллер, который получает информацию от пользователя и находит для него идеальный фрукт. Если в моем json-файле нет описания плода, он получит его из wikipedia (wikimedia api).

Проблема в том, что я не могу приложить обещание к переменной описания.

Я бы appriciate это это вы могли бы взглянуть,

Благодарности

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 
    }); 
}]); 

Answer 1

Это, как я решить:

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; 
           } 
          }); 
    } 
}]); 

Answer 2

Я предложил бы положить функциональность попасть в сервис или на заводе, но он будет работать внутри контроллера.

Я бы предложил подход с двумя частями. Используйте $ templateRequest для доступа к вашему JSON, а затем, если нет данных, выполните вызов в Wiki, используя $ http.

Что касается неопределенной ошибки, я предполагаю, что вы пытаетесь присвоить ее объекту yes? Если да, попробуйте создать экземпляр объекта как объект перед назначением.

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

Извините, это просто щелкнуло, что весь объект, а не только новое свойство не определено. Вышеуказанное не будет работать.

Считаете ли вы использование функции обратного вызова внутри функции успеха?

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

Перемещая назначение из успеха, вы можете обойти проблему, которая вызывает ее неопределенность.