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

Question

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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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":"[email protected]","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?

You can filter data from JSON that you are getting just by doing user.response.data.id I think. if you are getting the expected response from your API. — Ashish Rawat
– Ashish Rawat, Commented Jul 17, 2021 at 19:10

Tahmid Ali · Accepted Answer · 2021-07-17 19:18:19Z

3

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>

answered Jul 17, 2021 at 19:18

Tahmid Ali

8159 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Tahmid Ali Over a year ago

Let me know the results. If not satisfactory, with proper errors from the console may be I can edit and improve this answer further.

RicoRos Over a year ago

Thank you @TahmidAli for you help. After trying your code, I am not getting anything displaying on the Page, and I am not getting any errors in the Console. In the terminal I am getting this: Executing (default): SELECT id, email, password, firstName, lastName, age, gender, createdAt, updatedAt FROM Users AS User;

RicoRos Over a year ago

UPDATE: when I change {{ user.firstName }} back to {{ users }} I get a long list with the users displayed in JSON format multiple times.

Tahmid Ali Over a year ago

@RicoRos, can you please copy paste the output of {{users}}..? that way I could get some insights of how the json data is structured. Also try to put console.log(allUsers) in the API just before writing the response. We can check by skipping json.stringify here as well.

RicoRos Over a year ago

I am not sure why, but when I tried removing JSON.stringifyonce more, it worked!! Sooo nice - thank you!

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related