I am completely new to working with JHipster and have successfully created my first Endpoint that retrieves the entity "buddy" of the connected user:
@GetMapping("/buddies/view")
public ResponseEntity<Buddy> getConnectedBuddy() { [...] }
The endpoint is functioning properly, as confirmed by the logs showing that when a connected user visits this page, the controller is triggered, the GET request is successful, and the user data is returned:
Exit: com.mycompany.myapp.web.rest.AccountResource.getAccount() with result = UserDTO{login='haha', firstName='null', lastName='null', email='<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="82eae3eae3c2e5efe3ebeeace1edef">[email protected]</a>', 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 on a page similar to http://localhost:9000/< ENTITY-NAME >/{id}/view. I have successfully duplicated the buddy-details.vue and buddy-details.component.ts files and made the necessary modifications, adding the new page to the "entities.ts" file. Everything is functioning as expected.
However, I am facing an issue where the view page displays the entity-form without any data populated in it. Could you please guide me on how to fetch Backend data using TypeScript?
I believe I need to utilize the buddy.service.ts class but I am unsure of how to proceed.
Edit (additional information):
In my buddy.service.ts, I have implemented 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);
});
});
}
This method 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);
}
}
Any assistance provided would be greatly appreciated.