I’m trying out to generate data to the table using axios or regular fetch in Nuxt 3 however the data are only going through the console and not the table it self
I tried to setup these codes to fetch the data from the localhost API using PostgresSQL however data are still not going through the frontend but it managed to pass through the console when I tried to input a claw. I also used Ant Design for the front end as well.
Syntax for the table:
<a-table :dataSource="data" :columns="columns" style="width: 100%; overflow: auto; " />
const columns = [
{
title: '#',
dataIndex: 'id',
key: 'id',
},
{
title: 'First Name',
dataIndex: 'firstName',
key: 'firstName',
},
{
title: 'Last Name',
dataIndex: 'lastName',
key: 'lastName',
},
{
title: 'Middle Name',
dataIndex: 'middleName',
key: 'middleName',
},
{
title: 'Email Address',
dataIndex: 'email',
key: 'email',
}
]
// fetch('http://localhost:5005/users',{
// headers: {
// 'Authorization': 'Bearer ' + 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxMTUsImRhdGUiOiIyMDI0LTA0LTAxVDIzOjE3OjA2LjA1OFoiLCJpYXQiOjE3MTIwMTM0MjYsImV4cCI6MTcxMjAxNTIyNn0.1fi4LqhYq3NQNk9Z0xj2L19FU0Ky3hEECjRcvNPFWeA'
// }
// })
// .then(response => response.json())
// .then(data => {console.log(data)})
// .catch(error => {
// console.error('Error fetching users:', error);
// });
async fetch() {
try {
const data = await this.$axios.$get('http://localhost:5005/users', {
headers: {
Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxMTUsImRhdGUiOiIyMDI0LTA0LTAxVDIzOjE3OjA2LjA1OFoiLCJpYXQiOjE3MTIwMTM0MjYsImV4cCI6MTcxMjAxNTIyNn0.1fi4LqhYq3NQNk9Z0xj2L19FU0Ky3hEECjRcvNPFWeA'
}
});
} catch (error) {
console.error('Error fetching data:', error);
}
}
// async fetch() {
// try {
// const data = await fetch('http://localhost:5005/users', {
// headers: {
// Authorization: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoxMTUsImRhdGUiOiIyMDI0LTA0LTAxVDIzOjE3OjA2LjA1OFoiLCJpYXQiOjE3MTIwMTM0MjYsImV4cCI6MTcxMjAxNTIyNn0.1fi4LqhYq3NQNk9Z0xj2L19FU0Ky3hEECjRcvNPFWeA',
// }
// });
// const data = await response.json();
// } catch (error) {
// console.error(error);
// }
// }
Jose Antonio Santos is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.