サービスからコントローラへの.map関数の拡張オブジェクトを約束通り返す

Question

私がやっているのは、サービス中のJSONオブジェクトを拡張し、それをコントローラに渡すことです。

JSONがバックエンドコールを行う別のサービスからサービスを開始しました。

//get games config object from another service 
    gamesConfig: gamesConfigService.gamesConfig(), 

    // prepare name of games icons. This is support function executed in next method 
    transformSpace: function(subject) { 
     var ensuredSubject = subject.toString().toLowerCase(); 
     var transformedSubject = ensuredSubject.replace(/ /g, '_'); 
     return transformedSubject; 
    }, 

    //add iconname property to game config object 
    extendGameConfig: function() { 

     var that = this; 

     this.gamesConfig 
     .then(function (response) { 

      console.log(response.data); // this works and console.log my JSON 

      response.data.map(function(obj) { 

       return new Promise(function(res){ 
        angular.extend(obj, { 
         iconname: that.transformSpace(obj.attributes.name) + "_icon.png" 
        }); 
       }); 

      }); 

     }, function() { 
      console.log('errror'); 
     }); 

これは、一方の支持方法transformSpace、正しくデータを渡していない主なメソッドが含まれています

コードは、私がコメントやconsole.logsを追加し、かなり複雑です。私がして、コントローラにこの約束を受け取るしようとしている

（私が思う）：

theService.getGamesObj.extendGameConfig() 
    .then(function (response) { 
     $scope.allGames = response; 
     console.log($scope.allGames); 
    }, function() { 
     console.log('err') 
    }); 

そして私は、ビューでそれを使用します。次に、上記のコードは動作し、私に次のエラーを与えるものではありませんについて：

TypeError: Cannot read property 'then' of undefined

Answer 1

私はあなたのコードは

extendGameConfig: function() { 
    // *********** 
    // use => functions, that = this wont be needed 
    var that = this; 
    // *********** 
    // if you want this this function to return something, add a return 
    // this is why you get the 
    // Cannot read property 'then' of undefined error 
    // as this function returns undefined 
    this.gamesConfig 
    .then(function (response) { 

     console.log(response.data); // this works and console.log my JSON 
     // *********** 
     // you're using .map ... and discarding the result! 
     response.data.map(function(obj) { 
      // *********** 
      // you're creating a promise that never resolves! 
      // also, why are you promisifying synchronous code? 
      return new Promise(function(res){ 
       angular.extend(obj, { 
        iconname: that.transformSpace(obj.attributes.name) + "_icon.png" 
       }); 
      }); 
     }); 
    }, function() { 
     console.log('errror'); 
    }); 

ので、間違っていると思い、コメントを追加しました、この

extendGameConfig: function() { 
    return this.gamesConfig 
    .then(response => { 
     return response.data.map(obj => { 
      return angular.extend(obj, {iconname: this.transformSpace(obj.attributes.name) + "_icon.png"}); 
     }); 
    }, function() { 
     console.log('errror'); 
    }); 

を試してみてください

またはより良い

extendGameConfig: function() { 
    return this.gamesConfig 
    .then(response => 
     response.data.map(obj => 
      angular.extend(obj, {iconname: this.transformSpace(obj.attributes.name) + "_icon.png"}) 
     ) 
    ) 
    .catch(function (err) { 
     console.log('error', err); 
     throw err; // log the error, but you'll probably want to reject this promise so the calling code doesn't think there is success? 
    }); 
}