JHipster with vue - How to show data from the Backend in the Frontend

Question

I am new with JHipster and created my first Endpoint that gives me the entity "buddy" of the connected user:

@GetMapping("/buddies/view")
    public ResponseEntity<Buddy> getConnectedBuddy() { [...] }

This is working fine and I can see in the logs that a connected users going to this page trigger the controller, the get is successful and gives me the user:

Exit: com.mycompany.myapp.web.rest.AccountResource.getAccount() with result = UserDTO{login='haha', firstName='null', lastName='null', email='haha@gmail.com', imageUrl='null', activated=true, langKey='en', createdBy=anonymousUser, createdDate=2020-12-10T14:27:22.264Z, lastModifiedBy='anonymousUser', lastModifiedDate=2020-12-10T14:27:22.264Z, authorities=[ROLE_USER]}

Now, I want to display this user's data in a page similar to the http://localhost:9000/< ENTITY-NAME >/{id}/view page. I successfully created the page itself as I duplicated buddy-details.vue & buddy-details.component.ts and made the necessary changes, also I added the new page to the "entities.ts" file. This is all working.

But now I am getting the view page with the entity-form, though without any data in it. Can you please tell me: how can I fetch the Backend data with Typescript?

I guess I have to use the buddy.service.ts class but I do not know how.

Edit (additional information):

In my buddy.service.ts I created the get() method:

  public get(): Promise<IBuddy> {
    return new Promise<IBuddy>((resolve, reject) => {
      axios
        .get(`${baseApiUrl}/view`)
        .then(res => {
          resolve(res.data);
        })
        .catch(err => {
          reject(err);
        });
    });
  }

It is then called in the self-created buddy-active.component.ts:

import { Component, Vue, Inject } from 'vue-property-decorator';

import { IBuddy } from '@/shared/model/buddy.model';
import BuddyService from './buddy.service';

@Component
export default class BuddyActive extends Vue {
  @Inject('buddyService') private buddyService: () => BuddyService;
  public buddy: IBuddy = {};

  beforeRouteEnter(to, from, next) {
    next(vm => {
        vm.getBuddy();
    });
  }

  public getBuddy() {
    this.buddyService()
      .get()
      .then(res => {
        this.buddy = res;
      });
  }

  public previousState() {
    this.$router.go(-1);
  }
}

Thank you for your help.

Answer 1

The problem was quite simple in the end. I did everything that was required, but I imported the wrong script in the buddy-actice.vue . If you have the same problem, you can then simply read my original comment. You will have to do the java endpoint by yourself though.

Thank you Gaël Marziou for pointing me to the right direction.