Javascript Vue 3 Extract data from an array and display into a table

Question

Hello everyone hope you having a great day,

I have setup a front end app on Vue Js linked with an express.js api which connects to a mysql database. I use axios for sending http requests. I am able to grab the data from my mysql database and console.log it into the front end system. However I am struggling to extract the data from the array and display it into the table.

This is the table.

            <table class="table">
            <thead>
                <tr>
                    <th scope="col">#ID</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">email</th>
                    <th scope="col">DOB</th>
                    <th scope="col">Country Of Residence</th>
                    <th scope="col">Phone Number</th>
                    <th scope="col">Contact_Via Phone</th>
                    <th scope="col">Contact Via Email</th>
                    <th scope="col">Contact Via Mail</th>
                    <th scope="col">Sign up date</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                <th scope="row" v-for="name in newData" :key="newData.id"></th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
                </tr>
                <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
                </tr>
                <tr>
                <th scope="row">3</th>
                <td colspan="2">Larry the Bird</td>
                <td>@twitter</td>
                </tr>
            </tbody>
            </table>

This is where I grab the data from the database when the page is created.

    async created() {
        
        try {
            const getUserData = await axios.get('/api/getstudentdata',  {})
            .then(getUserData => getUserData.data)
            {
                this.newData = JSON.parse(JSON.stringify(getUserData))
                for( let i = 0; i < this.newData.length; i++) {
                    console.log(this.newData[i].Name)
                }
            }
        }catch(error) {
            console.log(error)
        }
    },

Here I have added what my console logs and what the vue dev tools say. https://i.sstatic.net/CHzdK.jpg console logs:

roxy {0: {…}, 1: {…}, 2: {…}}
[[Handler]]: Object
[[Target]]: Array(3)
0: {ID: 50, Name: 'Bob', Surname: 'Bobbob', Email: '[email protected]', DOB: '2000-07-15', …}
1: {ID: 51, Name: 'Tony', Surname: 'Scrub', Email: '[email protected]', DOB: '2000-07-15', …}
2: {ID: 52, Name: 'Onemoreuser', Surname: 'te4st', Email: '[email protected]', DOB: '2000-07-15', …}
length: 3
[[Prototype]]: Array(0)
[[IsRevoked]]: false

Dev tools:

newData:Array[3]
0:Reactive
ID:50
Name:"Bob"
Surname:"Bobbob"
Email:"[email protected]"
DOB:"2000-07-15"
Country_of_residence:"London"
Phonenumber:"0749432423"
contact_phone:"true"
contact_email:"true"
sign_up_date:"2022-07-19T14:06:19.000Z"
Timezone:"GMT+1"
1:Reactive
2:Reactive

Update! I managed to display all the data to the table however I cant extract just the ID or the Name... here is photo of result.

https://i.sstatic.net/Q6lGC.jpg

Morteza Gholami · Accepted Answer · 2022-07-19 15:09:20Z

3

First of all, in a v-for loop, keys must be unique and newData.id is not a valid key, I guess you wanted to use something like:

v-for="item in newData" :key="item.id"

Secondly ,you're using v-for in the wrong place and you are not using vue mustaches to use dynamic variables. Try this one:

<tr v-for="item in newData" :key="item.id">
  <td>{{item.ID}}</td>
  <td>{{item.Name}}</td>
  <td>{{item.Surname}}</td>
  ...
 </tr>

edited Jul 19, 2022 at 15:09

answered Jul 19, 2022 at 15:06

Morteza Gholami

793 bronze badges

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

Collectives™ on Stack Overflow

Javascript Vue 3 Extract data from an array and display into a table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related