CODEWITHSUNDEEP
vue.jstabletop.js
bilcker
bilcker

Reputation: 1130

Use tableTop.js to return an array that can be used in Vue Components

I am attempting to build an array of objects from a spreadsheet using tableTop.js that can be passed into other functions and vue components. I have been unsuccessful in returning anything I can actually use. I found this post that got me close to what I am after however what it is returning is an array of arrays of objects with two undefined array items beginning with [ob: Observer]

If I log out data in the getLibrary() function I can see the correct array how I need to receive it in my component.

If I don't push the data into the gData array in libraryData I receive undefined in vue from the function. I have attempted promises, normal functions etc. but nothing seems to work. Very appreciative of any help anyone can provide thanks.

Image 1 is what I am logging out in library data that I am trying to receive in vue.

Image 2 is what I am getting in vue

libraryData.js

// let gData = []

export default async function () {
  let spreadSheet = 'url'
  Tabletop.init({
    key: spreadSheet,
    callback: (data, tabletop) => { return getLibraryData(data,m tabletop) },
    simpleSheet: true
  })
}


export function getLibraryData(data, tabletop) {
   // gData.push(data);
   ///gData = data
   log(data)
   // I just want to return the data here to be used in vue
   return data;
}

index.js import Vue from 'vue' import libraryData from './partials/libraryData.js'

// Too be added into a vue-lodaer?
new Vue({
  el: '#vhsLibrary',
  router,
  template: '<vhsLibrary/>',
})

window.addEventListener('DOMContentLoaded', () => {
  libraryData()
})

vue_component.vue

<script>
    import { getLibraryData } from '../../js/partials/library_data';

export default {
    data: () => {
        return {
          gData: null
        }
    },
    mounted () {
        this.gData = getLibraryData()
        log('Get Library', getLibraryData())
    }
}
</script>

Correct array being logged from library_data

Vue Component Log of Incorrect Array

Upvotes: 0

Views: 215

Answers (1)

Ohgodwhy
Ohgodwhy

Reputation: 50787

There's a few issues here:

You use async, but you never await. In your case, we want to await the resolution or rejection of a Promise:

export default async function () {
  return await new Promise((resolve, reject) => {
    const spreadSheet = 'url'
    Tabletop.init({
      key: spreadSheet,
      callback: (data, tabletop) => { resolve({data, tabletop}) },
      simpleSheet: true
    })
  })
}

There's no reason for the additional function because it has no gains. Let's look at Vue now.

First, your gData variable is initialized as null as opposed to []. Let's change that:

data () {
  return {
    gData: []
  }
},

Next, let's update our mounted method. We can use the same async/await pattern here:

async mounted () {
  const { data } = await getLibraryData()
  this.gData = data
}

And now you can v-for="(row, index) in gData" to iterate it.

Here's a codepen for you, too

Upvotes: 1

Related Questions