Can records be passed into a collection and displayed in a Lightning web component?

Question

I am creating a lightning web component to visualize salesperson records in a timeline concept. I have successfully created timeline components, styles, etc. and retrieved data using salesforce's recently released API. I've included a link below for more information. I'm pretty new to JavaScript, so please forgive me if there are any serious mistakes.

https://developer.salesforce.com/docs/component-library/documentation/en/lwc/lwc.reference_wire_adapters_get_lated_list_records

The problem comes from when I retrieve the data and try to split the records into different collections based on specific values ​​of the fields, it doesn't produce any results. I'm using for:each in HTML to call my collection but no records are showing.

I think the problem is with the for loop that appends the data to the collection, but I'm not sure. I've changed data[x] to this.records[x] and it produces the same result. I appreciate any pointers and welcome any constructive criticism.

Please note that when I use the records collection provided by the API, the records are displayed.

Timeline.js

import { LightningElement,api, wire, track} from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';
export default class timeline extends LightningElement {
    @api recordId;
    @track CompletedTasks = [];
    @track InProgressTasks = [];
    @track OverdueTasks = [];
    error; 
    records;

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Tasks__r',
        fields: ['Task__c.Id','Task__c.Name', 'Task__c.Estimated_Completion_Date__c', 'Task__c.Completion_Status__c'],
        sortBy: ['Task__c.Estimated_Completion_Date__c'],
        
    })listInfo({ error, data }) {
        if (data) {
            this.records = data.records;
            this.error = undefined;
            for (let x = 0; x < data.length; x++) {
              if (data[x].Completion_Status__c === "Completed") {
                  this.CompletedTasks.append(data[x]);
              } else if (data[x].Completion_Status__c === "In Progress") {
                  this.InProgressTasks.append(data[x]);
              } else if (data[x].Completion_Status__c === "Overdue") {
                  this.OverdueTasks.append(data[x]);
              }
          }
        } else if (error) {
            this.error = error;
            this.records = undefined;
        }

    }

Timeline.html

<lightning-tab label="All Tasks" value="All Tasks" title = "All Tasks">
   <div style="overflow-x: scroll; height:130px;">
      <div class="tasks-container">
         <template for:each={CompletedTasks} for:item="rec">
            <div key={rec.fields.Id.value}>
               <template if:true={CompletedTasks}>
                  <div class="task-card">
                     <ul class="slds-has-dividers_around-space" draggable="true">
                        <li class="slds-item">
                           <article class="slds-tile slds-tile_board">
                              <h3 class="slds-tile__title slds-truncate" title="Journey Name">
                                 <p style = "font-weight: 600;">Web Development Onboarding</p>
                              </h3>
                              <div class="slds-tile__detail">
                                 <div class="slds-text-heading_small">
                                    <a>
                                    {rec.fields.Name.value}
                                    </a>
                                 </div>
                                 <p class="slds-truncate" title="Esimated Completion Date:">Esimated Completion Date:</p>
                                 <div class = "statusdate">
                                    <p class="slds-truncate" title="Date" style = "width: 200px;">{rec.fields.Estimated_Completion_Date__c.value}</p>
                                    <div class = "statusbuttoncomplete">
                                       <span class="slds-badge slds-theme_success">{rec.fields.Completion_Status__c.value }</span>
                                    </div>
                                 </div>
                              </div>
                           </article>
                        </li>
                     </ul>
                  </div>
               </template>
            </div>
         </template>
      </div>
   </div>
</lightning-tab>

Answer 1

There are almost no syntax errors in loops.

• No data.length Because data is an object, not an array. You need data.records.length.
• Access to field values ​​must be similar to what is in the html section (rec.fields.Completion_Status__c.value), if you just go to data[x].Completion_Status__c === " Completed" You are comparing strings which are complex objects. Yes, this is different than when you use data sent from Apex, and is a bit annoying, but this is the standard LWC/UI logging API that will work for you...
• This is array.push(), not append().
• and html - either you didn't paste everything, or there's something fishy around the Lightning-tab that isn't rendering anything.

Try this method (it will convert to display account case, not everyone will have your custom task__c)

import { LightningElement,api, wire, track} from 'lwc';
import { getRelatedListRecords } from 'lightning/uiRelatedListApi';

export default class Stack74031191 extends LightningElement {
    @api recordId;
    @track CompletedTasks = [];
    @track InProgressTasks = [];
    @track OverdueTasks = [];
    error; 
    records;

    @wire(getRelatedListRecords, {
        parentRecordId: '$recordId',
        relatedListId: 'Cases',
        fields: ['Case.Id','Case.Subject', 'Case.CreatedDate', 'Case.Status'],
        sortBy: ['Case.CreatedDate'],
        
    })listInfo({ error, data }) {
        if (data) {
            this.records = data.records;
            this.error = undefined;

            for (let i = 0; i 


    55.0
    true
    
        lightning__RecordPage