ratiw / vue-table

data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.
MIT License
1.83k stars 303 forks source link

Field nested and with dots in key's not showing #164

Open p0psicles opened 7 years ago

p0psicles commented 7 years ago

I'm trying to show a nested field, with dot's in the key. Like:

"results": [{
"displayId": "asfsfsf",
"metadata": {
            "com.atlassian.bitbucket.server.bitbucket-branch:latest-commit-metadata": {
..

I'm using the following fields configuration:

fields: [
        'displayId',
        {
          name: '["metadata"]["com.atlassian.bitbucket.server.bitbucket-branch:latest-commit-metadata"]',
          title: 'pullRequest'
        }
      ],

The displayId is showing. But the pullRequest fields, is not showing anything. The key is not available for all rows, so that could also have something to do with it. But I expect that it would would just leave that empty in that case.

What is the best way of configuration this?

ratiw commented 7 years ago

@p0psicles Vuetable treaats the . in the key name as nested field, so when your key field inside metadata contains . it will try to look deeper into the structure for the given key. So, it will not work as expected in this case.

Unless you modified your key inside metadata to use something other than ., like underscore _, this would work:

"results": [{
"displayId": "asfsfsf",
"metadata": {
    "com_atlassian_bitbucket_server_bitbucket-branch:latest-commit-metadata": {
..
fields: [
  'displayId',
  {
    name: 'metadata.com_atlassian_bitbucket_server_bitbucket-branch:latest-commit-metadata',
    title: 'pullRequest'
  }
],
p0psicles commented 7 years ago

Unfortunately I do not have any control over the data being send back. Also there is no incentive for them to change it as it's valid json.

Isn't there any other way?

ratiw commented 7 years ago

@p0psicles Use the transform function. See here Or, create a component to handle it.