NodeJS REST endpoint not called until page is refreshed

Ionic Framework ionic-v3
#1

I have an app for language school. There are several Levels (A1, A2, B1…) and each Level has several Lessons. On the home page I’m displaying all the levels, and when the user clicks one of them, he should be taken to a page with all the lessons for that level. That works the first time, but when I go back and then open another level, I still see the lessons from the first level I’ve chosen. In the logs I see that my REST service was called only the first time. I have to refresh the page (F5), and only then will the REST endpoint be called again for the level that I pick.
Here are the relevant parts of server.js:

var Level = mongoose.model('Level', {
    title: String
});

var Lesson = mongoose.model('Lesson', {
    title: String,
    body: String,
    levelTitle: String
});

app.get('/api/lessons/:levelTitle', function (req, res) {
    Lesson.find({ levelTitle: req.params.levelTitle },
        function (err, lessons) {
            if (err)
                res.send(err);
            res.json(lessons);
        });
});

I call the REST service from LessonProvider:

  getLessonsForLevel(level) {
    if (this.data) {
      return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
      this.http.get('http://localhost:8080/api/lessons/' + level.title)
        .subscribe(data => {
          this.data = data;
          resolve(this.data);
        });
    });
  }

…and that method is called from level-view.ts:

  constructor(public navCtrl: NavController, public navParams: NavParams, public levelService: LevelProvider, public lessonService: LessonProvider) {
    this.level = navParams.get('level');
  }

  ionViewDidLoad() {
    this.lessonService.getLessonsForLevel(this.level).then((data) => {
      this.lessons = data;
    });
  }

I get to the level-view page via a method in home.ts:

  goToViewLevelPage(level) {
    this.navCtrl.push(LevelViewPage, { level: level });
  }

…which is called when a user clicks on a button on the home.html page:

<ion-item *ngFor="let level of levels">
  <h1>{{level.title}}</h1>
  <button ion-button (click)="goToViewLevelPage(level)">
    See lessons for this level
  </button>
</ion-item>

Just to be clear, when I navigate to a certain level page, I have the back arrow in the upper-left corner (I think that’s a part of ion-navbar inside the ion-header). I use that arrow to go back to the home page and then to pick another level.

Does anyone have a clue what might be wrong?

#2

Yes, you are caching your data in your service. You also are doing unnecessary promise wrapping in your service, which you should not do, simply call toPromise on your http method. The way you have it now could result in errors getting swallowed.

Just change your service method to this and it will work.

getLessonsForLevel(level) {
  return this.http.get('http://localhost:8080/api/lessons/' + level.title).toPromise();
}

Your caching of the data by placing it into this.data meant that after the first time you’d only ever pull this.data, you’d never hit your server again. It seems looking at your code you meant that to happen, otherwise idk why you’d have this.data?

#3

It works, thanks :slight_smile:
I’ve just started learning Ionic, and I’m also not that good with other used technologies as well. This solution was a part of a tutorial that I’ve found, so that’s why I’ve used it.

#4