Dashboard showing blank table even if datasource is correctly populated

Description

Template code

<BetaTable
  @columns={{array 'Firstname' 'Phonenumber'}}
  @rows={{this.users}}
  @alignColumnLeft={{true}}
  as |RowColumn user|
>
  <RowColumn>
    <span>{{user.firstname}}</span>
  </RowColumn>
</BetaTable>

Component Code

import Component from '@glimmer/component';
import { inject as service } from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class extends Component {
  @service lianaServerFetch;

  @tracked users;

  constructor(...args) {
    super(...args);
    this.fetchData();
  }

  async fetchData() {
    const response = await this.lianaServerFetch.fetch('/forest/users', {});
    this.users = await response.json();
    console.log(this.users);
  }
}

Expected behavior

The table to display correctly

Actual behavior

this.users is populated correctly however the dashboard shows blank. What am I missing here

Hello @Nam_B and welcome to the Forest Admin community.

First, could you please tell me you project name to help with the investigations?

I’m sorry, but your message seems mixed up with the template. Could you try to reformat it a bit?
Also, could you add some more details on what component are visible on your dashboard and what you are expecting?
Some screenshots may help.

Thank you

ForestAdmin_DashboardHelp
Here is the workflow, if I add static data for users, it displays correctly, however it’s not able to fetch from the users object. Please note the users object is correctly populated as seen on console logs. Hope this helps. I followed the [Create a Smart Chart - Documentation](https://smartchart documentation)

Hey @Nam_B,

your users is an object not an array :wink:. You need to do

    const result = await response.json();
    this.users = result.data;
1 Like

Thank you for quick response. You guys are great! Thanks once again.

Now the firstName would show as blank. how to access that? @vince

I resolved it on my own. Thank you once again. Closing this ticket.

1 Like

One more question :slight_smile: - How to fetch more than 10 records? @Guillaume_Deslandes @vince

Use the query parameters page[number] and page[size]

const url = `${/forest/users}?${new URLSearchParams({ 'page[size]': 20, 'page[number]': 2 }).toString()}`

This should do the trick I think

2 Likes