More complex data object

[sebastian-raubach]

I'm currently trying to use your excellent table component. I've got a data object that looks something like this:

[
  {
    "date": "2018-05-22",
    "times": [
      {
        "projectId": 1,
        "date": "2018-05-22",
        "duration": 27381
      },
      {
        "projectId": 2,
        "date": "2018-05-22",
        "duration": 3109
      }
    ]
  },
  {
    "date": "2018-05-23",
    "times": [
      {
        "projectId": 1,
        "date": "2018-05-23",
        "duration": 321321
      },
      {
        "projectId": 2,
        "date": "2018-05-23",
        "duration": 0
      }
    ]
  }
]

I managed to get the date of the elements to show as a column. What I'd then want to do is show the content of times as the other columns. I thought, I could get this working by doing the following:

<table-column v-for="project in projects" :key="project.id" show="times" :label="project.name" :formatter="formatter"></table-column>

project.id maps to the projectId in the times object. And then extract the data from times in the formatter, but it doesn't get called and throws an error:

Uncaught (in promise) TypeError: this.data is not a function
    at VueComponent._callee4$ (index.js?b1c8:1957)
    at tryCatch (index.js?b1c8:4169)
    at Generator.invoke [as _invoke] (index.js?b1c8:4403)
    at Generator.prototype.(:8888/anonymous function) [as next] (webpack-internal:///227:4221:21)
    at step (index.js?b1c8:2593)
    at eval (index.js?b1c8:2611)
    at new Promise (<anonymous>)
    at new F (index.js?b1c8:197)
    at VueComponent.eval (index.js?b1c8:2590)
    at VueComponent.fetchServerData (index.js?b1c8:1980)

Is there any way to use this data object without reformatting it into something that resembles your examples?

[sebastian-raubach]

I managed to get the table to load (there was an issue with the data object), but now it shows [object Object],[object Object] in each cell, which indeed is the times object. Is there any way to get it to display the data within that times array in those cells?

[dylanglockler]

Did you try project.times.duration for example?

I've had success accessing relationships with dot notation with similar, asynchronous data.

[sebastian-raubach]

Thanks for the response. Unfortunately, it doesn't seem to work.

If I try show="project.times.duration", I get Duplicate keys detected: 'project.times.duration'. This may cause an update error.

If I try :show="project.times.duration", I get TypeError: Cannot read property 'duration' of undefined

[juanbrujo]

I'm facing the same error in console Uncaught (in promise) TypeError: this.data is not a function, and my object data is simple:

{
  "suppliers": [
    {
      "id": 1,
      "empresa": "Las 3 B",
      "estado": "Activo",
      "rfc": "US61810-1",
      "facturas": 72,
      "fecha_creacion": "20/06/2018"
    },
    ...

the table:

<table-component :data="supplierData">
  <table-column show="id" label="ID" data-type="numeric"></table-column>
  <table-column show="empresa" label="Empresa"></table-column>
  <table-column show="estado" label="Estado"></table-column>
  <table-column show="rfc" label="RFC"></table-column>
  <table-column show="facturas" label="Facturas" data-type="numeric"></table-column>
  <table-column show="fecha_creacion" label="Fecha creación" data-type="date:DD/MM/YYYY"></table-column>
</table-component>

And axios:

axios(
        {
          method: options.method,
          ....
        })
        .then(response => {
          if (response && response.status === 200) {
            this.supplierData = response.data
          ......

[freekmurze]

We don't use this package anymore in our own projects and cannot justify the time needed to maintain it anymore. That's why we have chosen to abandon it. Feel free to fork our code and maintain your own copy or use one of the many alternatives.