Nuxt/Axios - can't display array from database correctly on page

user_3109394 0
Viewed 81

UPDATE (July 18th): I have made changes according to the help i have recieved in this thread, and have updated the payload and the problem I am facing.

I am pretty new with Nuxt and Axios and I am having big difficulties in displaying a list of simple data from an array from the database. As of now, I am only getting a blank screen. But if I change {{ user.firstName }} - {{ user.email }} to {{ users }} instead in my Vue-page (pages/matches.vue), this is what is being displayed on the page in an almost infinite number of times:

[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]
[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]
[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]
[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]
[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]

What I want is to display, is each users 'firstName' and 'email' per line.

Here is my code:

pages/matches.vue

<template>
    <section class="container mx-auto px-4 sm:px-6 lg:px-8  py-3">

        <div class="container w-full flex flex-wrap mx-auto px-12 pt-4 lg:pt-2 mt-6 ">
            <section class="w-full lg:w-4/5">
            <div id="app-4">
                <ol>
                    <li v-for="user in users" :key="user.id">
                        {{ user.firstName }} - {{ user.email }}
                    </li>
                </ol>
            </div>
            <!--divider-->
            </section>
        </div>
    </section>
</template>

<script>


export default {
    data() {
        return {
            users: null,
        };
    },
    mounted() {
        this.$axios
        .get('/api/users/all')
        .then(response => {
            this.users = response.data;
        })
        .catch(err => {
            throw err;
        });
    }
}
</script>

router.js

// Get all Users
router.get(
    '/api/users/all', 
    UserController.getAll // Log in the User using the UserController (controllers/User.js)
)

controllers/User.js

// Find all users
exports.getAll  = async (req, res) => {
    let users = await models.User.findAll();
    let allUsers = JSON.stringify(users);
    res.json(allUsers);
}

If I console.log allUsers this is what I am getting:

[
{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},
{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}
]

Can any of you see what the problem could be?

axios nuxt.js javascript
1 Answers

Can you try with:

mounted() {
    this.$axios
    .get('/api/users/all')
    .then(response => {
        this.users = response.data;
      
        return response.data;
        // console.log("HERE : " + this.users);
        
    })
    .catch(err => {
        throw err;
    });
}

Point is skipping the JSON.stringify part and get the exact user array from the response. After that, in the HTML code,

<li v-for="user in users" :key="user.id">
   {{ user.firstName }}  {{ user.email }} <!-- Depending on how the users are structured in the model -->
</li>
user_23849600
Related