Smart View - Relations not showing

Help me!
1

Hey,

I have the following smartview template, but the relations (company and projectPhases) are not shown:

{{#each @records as |record|}}
    <p>{{record.forest-name}}</p>
    <i>{{record.forest-company.name}}</i>
  {{#each this.record.forest-projectPhases as |projectPhase|}}
    <p>{{projectPhase.forest-name}}</p>
  {{/each}}
{{/each}}

HTML Output:

<div class="l-beta-collection-list-body">
              <p>Project Name 2</p>
    <i></i>
<!---->    <p>Project Name 2</p>
    <i></i>
<!-- ...more rows --> 
  </div>

Both company (belongsTo) and projectPhases (hasMany) are defined on the project model.

When I do the following in the component.js, I get the related projectPhases

const phasePromises = this.args.records.map(project => project.get('forest-projectPhases'));
await Promise.all(phasePromises);
const allDates = this.args.records.map(project =>
    project.get('forest-projectPhases').reduce((all, phase) => {
    // .... here I have the correct phases

I tried to disable the component.js (disable JS execution), but the problem persists.

When I check the API call in network tab that loads the projects, I see:

{
  data: [
    0-9: {
        attributes: {}, // the direct fields of the project
        id: 1,
        type: 'project',
        relationships: {
          company: { data: {type: "company", id: "1"} }
          projectPhases: { links: '' } // contains links to API endpoint
        }
    }
  ]
  included: [
    0: {
      type: 'copmany',
      attributes: {}, // company data
      id: 1,
      relationships: {} // other relations
    }
  ]
}

According to the API request, at least the company data is loaded. However, the HTML outputs ONLY the project names. Not the company name and not the projectPhases loop.

The documentation says “Forest triggers automatically an API call to retrieve the data from your Admin API only if it’s necessary.”. I do not see additional API calls.

Thanks for your support!

2

Hi @marksrr,

It’s because you have 2 issues in your template :wink::

<i>{{record.forest-company.name}}</i>

Should be:

<i>{{record.forest-company.forest-name}}</i>

And :

{{#each this.record.forest-projectPhases as |projectPhase|}}

should be:

{{#each record.forest-projectPhases as |projectPhase|}}

Let me know if that fixes your issues :folded_hands:

3

Awkward blindness… Thank you :wink:

1 Like