Dashboard showing blank table even if datasource is correctly populated

Help me!
1

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

2

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

4

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
5

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

6

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

7

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

1 Like
8

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

9

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