I am struggling to find any syntax documentation related to building a Web Component, and could really use some help.
For example, in my JS file I make a call to a custom APEX api that returns a List of a custom object:
@wire(getCourseData, { studentId: '$recordId' }) studentCourseRelationships;
And then I would like to iterate over that List and display the data in an accordion, but only if the Lists is not empty:
<template>
<lightning-card title="Courses" icon-name="custom:custom14">
<div class="slds-m-around_medium">
<template if:true={studentCourseRelationships.data}>
<p>HEYO</p>
<lightning-accordion allow-multiple-sections-open>
<template for:each={studentCourseRelationships.data} for:item="rel">
<lightning-accordion-section key={rel.Id} name={rel.Name} label={rel.Course__r.Name}>
<p>This is the content area for section A.</p>
<p>Donec vitae tellus egestas, faucibus ipsum ac, imperdiet erat. Nam venenatis non ante at sagittis. Integer vel purus eget nunc semper placerat. Nam tristique quam leo, et posuere enim condimentum quis. Ut sagittis libero id lectus tempor maximus. Nunc ut tincidunt eros, a hendrerit leo. Suspendisse quis fermentum dolor. Nulla euismod consectetur leo, id condimentum nunc consequat quis.</p>
</lightning-accordion-section>
</template>
</lightning-accordion>
</template>
<template if:false={studentCourseRelationships.data}>
<p>Student is not enrolled in any courses</p>
</template>
</div>
</lightning-card>
</template>
However, the <template if:true={studentCourseRelationships.data}>
piece is always true even if the list is empty.
I tried doing a isEmpty(studentCourseRelationships.data)
but that throws an error. In my JS I tried creating a boolean to examine it:
get hasCourses() {
return (this.studentCourseRelationships.data.length > 0);
}
I get the error that this.studentCourseRelationships.data.length
is undefined...
I just can't seem to find anything that tells you how to manipulate the data returned by your APEX methods. Do I need to convert studentCourseRelationships.data to a different data type before evaluating in JS? I have been able to find some syntax information on aura components, but not web components...
syntax
for expressions Migrate Conditionals, not sure this is what you are looking for