items.sort not found when trying to get data from db and populate vuetify data table

Question

I'm trying to get data from database and populate vuetify table with laravel,vue and vuetify. With example So far I have managed to get datatable headers but when i run npm run dev it compiles normally without any errors but in the console i get this

Uncaught TypeError: items.sort is not a function at app.js:60601

And i have printed the response of the axios function in console which I use to get data from database

Promise
__proto__: Promise
 [[PromiseStatus]]: "resolved"
 [[PromiseValue]]: Array(2)
  0: {Day: "MONDAY", RouteCode: "MO-A", RouteName: "TORRINGTON/RAJAGIRIYA", 
     VehicleNo: "LZ-7878", DriverID: "Janaka Amarathunga", …}
  1: {Day: "MONDAY", RouteCode: "MO-C", RouteName: " AHUNGALLA / KALUTHARA", 
     VehicleNo: null, DriverID: null, …}
 length: 2
 __proto__: Array(0)

app.js file

require('./bootstrap');
window.Vue = require('vue');
window.Vuetify = require('vuetify');
import Vuex from 'vuex'
import store from './store/store'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify,Vuex);

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.component('daily-delivery-planner', require('./components/DailyDeliveryPlanner.vue').default);

const app = new Vue({
    el: '#app',
    store,
});

store.js file

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
    strict: true, 
    state: {
      pagination: {
        descending: true,
        page: 1,
        rowsPerPage: 4,
        sortBy: 'fat',
        totalItems: 0,
        rowsPerPageItems: [1, 2, 4, 8, 16]
      },
      items: []
    },
    mutations: {
      setPagination (state, payload) {
        state.pagination = payload
      },
      _setItems (state, { items, totalItems }) {
        state.items = items
        Vue.set(state.pagination, 'totalItems', totalItems)
      }
    },
    actions: {
      queryItems (context) {

        return new Promise((resolve, reject) => {

          const { sortBy, descending, page, rowsPerPage } = context.state.pagination

          setTimeout(() => {

            let dd = getData()
            console.log(dd);

            let items = dd
            const totalItems = items.length

            if (sortBy) {
              items = items.sort((a, b) => {
                const sortA = a[sortBy]
                const sortB = b[sortBy]

                if (descending) {
                  if (sortA < sortB) return 1
                  if (sortA > sortB) return -1
                  return 0
                } else {
                  if (sortA < sortB) return -1
                  if (sortA > sortB) return 1
                  return 0
                }
              })
            }

            if (rowsPerPage > 0) {
              items = items.slice((page - 1) * rowsPerPage, page * rowsPerPage)
            }

            context.commit('_setItems', { items, totalItems })

            resolve()
          }, 1000)
        })
      }
    },
    getters: {
      loading (state) {
        return state.loading
      },
      pagination (state) {
        return state.pagination
      },
      items (state) {
        return state.items
      }
    }
  })

  async function getData() {
    try {
        const response = await axios.get('getDayRelatedData/'+'Monday');
        return response.data;
    } catch (error) {
        console.error(error);
    }

}

DailyDeliveryPlanner.vue

Since I'm a beginner to vue I've followed this codepen. Is this the right approach ? Any help and suggestions would be appreciated !

Efrat Levitan · Accepted Answer

why it happened:

you called asynchronous getData from inside a synchronous function (it doesnt matter that its inside a promise). the asynchronous chain was broken.

since javaScript is running asynchronously, your items.sort (probably) happened before the async getData resolved, therefore, items was still undefined and when trying items.sort you got the typeError.

how to solve:

asynchronous process should stay asynchronous all the way down the functions chain. you are calling getData, which is asynchronous, therefore, queryItems should be asynchronous as well, so it will be able to wait for the response. i saw you are mixing promises and asyncawait so i brought here an converted queryItems (which returning a promise) to an async function in bot ways:

using async-await:

async queryItems (context) {
return new Promise((resolve, reject) => {

  const { sortBy, descending, page, rowsPerPage } = context.state.pagination

  setTimeout(async () => {
  try{
    let dd = await getData()
   }catch{
    return reject();}
    console.log(dd);

    let items = dd
    const totalItems = items.length

    if (sortBy) {
      items = items.sort((a, b) => {
        ................................
     return resolve();
}

using only promises syntax:

queryItems (context) {

return new Promise((resolve, reject) => {

  const { sortBy, descending, page, rowsPerPage } = context.state.pagination

  setTimeout(() => {
  return getData().then(dd=>
    console.log(dd);

    let items = dd;
    const totalItems = items.length
    if (sortBy) {
      items = items.sort((a, b) => {
        ................................
         return resolve();
      }).catch(e=>{
            return reject(e)})
}

items.sort not found when trying to get data from db and populate vuetify data table

Answers (2)

Related Questions