0

I have written angular controller and service to read data from json file. service read data and passes it to controller it works fine but when I try to assign this data to new object it wont work.

I want to call a new function in my promise and pass my data as object to this new function so I can use it whereever required. controller code,

class WPEntryController {
    static $inject = ["$location", "WPEntryService"];
    constructor($location, WPEntryService, $http) {
        console.log("IN WPEntryController");
        this.$location = $location;
        this.WPEntryService = WPEntryService;
        this.loadWPEntryPagewithData();

    }
    loadWPEntryPagewithData(){
        this.WPEntryService.loadWPEntryData().then(function(promise){
           this.DataObject = promise;
            this.storeObject();
        });
    }
    storeObject() {
        console.log(this.DataObject);
    }
}
angular.module("app").controller("WPEntryController", WPEntryController);

services code,

class WPEntryService {
  static $inject = ["$http"];
  constructor($http) {
    this.$http = $http;
  }
    loadWPEntryData() {
        //read json file or provide URL for data
        var promise = this.$http.get('...')
            .then(function (dataObject) {
                return dataObject.data;
            })
            .catch(function (response) {
                return response;
            });
        return promise;
    }
}

angular.module('app').service('WPEntryService',WPEntryService);
Prasad
  • 1,783
  • 5
  • 22
  • 26
  • Are you sure that you want `catch(function (response) { return response; });`? That ignores errors and fulfills the promise with them. – Bergi Dec 16 '15 at 08:02

1 Answers1

0

You're having the wrong this context in your then callback. Use an arrow function instead:

loadWPEntryPagewithData(){
    this.WPEntryService.loadWPEntryData().then(dataObject => {
//                                             ^^^^^^^^^^^^^^
        this.DataObject = dataObject;
        this.storeObject();
    });
}

However, this approach is still fragile and might not work as expected. It's much better to store the promise itself in that instance slot:

loadWPEntryPagewithData(){
    this.DataPromise = this.WPEntryService.loadWPEntryData();
    this.storeObject();
}
storeObject() {
    this.DataPromise.then(DataObject => console.log(DataObject));
}
Community
  • 1
  • 1
Bergi
  • 630,263
  • 148
  • 957
  • 1,375
  • Thanks your code worked, but still I am not able to pass this DataObject to another function – Prasad Dec 16 '15 at 08:38
  • What other function? And when are you trying to pass it around, are you sure it has loaded already? That's why I recommend to store `DataPromise`. – Bergi Dec 16 '15 at 08:51
  • What I mean is, if I try to assign this.menu = DataObject in my storeObject() I get undefined error. – Prasad Dec 16 '15 at 09:25
  • Well there is no variable `DataObject` in the function scope (unless you're in the promise `then` callback). Maybe you should [ask a new question](http://stackoverflow.com/questions/ask) and post your current code. – Bergi Dec 16 '15 at 09:35