Connecting Vue.js Frontend -> through Express, Node.js, Sequelize (API) endpoints. (PostgreSQL) - postgresql

Question

I have worked through various tutorials to understand and implement the Api Calls (Endpoints), defining Getters, almost to the point where I can fully invoke CRUD operations through routes pointing to them accordingly.
I can create Foreign Keys through sequelize, which creates my PostgreSQL table perfectly
async showAll (req, res) {
try {
const products = await Product.findAll({
where: {}
})
res.send(products)
} catch (err) {
res.status(500).send({
error: 'An Error has occured trying to retrieve Products'
})
}
},
In Postman
When hitting my endpoint GET /principals
All the relevant products are also displayed
{
"id": 2,
"name": "Company B",
"telephoneNumber": "012 111 1111",
"address": "Betha Str\nBedrasDorp",
"logo": "",
"registrationNumber": "2020/123/1234",
"taxNumber": "123",
"monthEnd": 1,
"createdAt": "2020-01-31T09:29:39.692Z",
"updatedAt": "2020-01-31T09:29:39.692Z",
"products": [
{
"id": 18,
"stockCode": "U7U5U",
"nappiCode": "NULL",
"barCode": "NULL",
"description": "Silver",
"sysPrice": 297.43,
"image": "",
"createdAt": "2020-01-31T09:25:22.620Z",
"updatedAt": "2020-01-31T09:25:22.620Z",
"principalId": 2
},
My question
How do I display my Principal Name in a Vue component and not just the principalID as per sequelize created column on my postgreSQL DB.
My current section within products.vue
<script>
....
async mounted () {
// do request to list all products
this.products = (await ProductsService.showAll()).data
}
...
</script>
displaying the productId
....
<template
slot="items"
slot-scope="{ item }">
<td>{{ item.stockCode }}</td>
<td>{{ item.description }}</td>
<td class="text-xs-left"> {{ item.principalId }} </td>
</template>
...
How can I display the Principal - name from a foreign key constraint? Linked in my PostgreSQL table in the Vue component.
Please help!

Answer 1

I managed to sort it out.
You controller section should include.
async showAll (req, res) {
try {
const products = await Product.findAll({
where: {},
include: [
{
model: ParentName
}
]
})
res.send(products)
} catch (err) {
res.status(500).send({
error: 'An Error has occured trying to retrieve Products'
})
}
}
Your .vue component Script section
async mounted () {this.products = (await ProductsService.showAll()).data
}
And calling it in the Template Component within vue becomes easy
{{ props.item.Principal.name }}