LWC - How To Loop Through A List With data-aura-rendered-by attribute?

Question

is there any way we can loop through a list of object with this code snippet?

• It works okay when the list return 1 record. However, if the list has more than 1 record, it cannot rendered (display).

• I think it's because of data-aura-rendered-by. This attribute in my pov is unique so it cannot display if it is duplicated.

=> I tried to assigned data-aura-rendered-by={opp.Id} so it has unique value => I tried to removed all the data-aura-rendered-by and data-aura-class but it cannot work out.

Please help me with this and help me to understand about data-aura attribute as I researched online, I could not find any source explain about it.

HTML code:

<ul aria-describedby="400:0;1" data-aura-rendered-by="6952:0">
  <template for:each={data} for:item="opp">
    <li data-aura-rendered-by="7062:0"
        class="runtime_sales_pipelineboardPipelineViewCardStencil forceRecordLayout"
        data-aura-class="runtime_sales_pipelineboardPipelineViewCardStencil forceRecordLayout" key={opp.Id}>
      <div draggable="true" tabindex="0"
           class="pipelineViewCard uiDraggable"
           data-aura-rendered-by="7096:0" data-aura-class="uiDraggable" data-aria-grabbed="false">
        <div class="pipelineViewCardInnerWrapper" data-aura-rendered-by="7064:0">
          <p class="primaryDisplayField" data-aura-rendered-by="7065:0">
            <a data-refid="recordId" data-special-link="true"
               title="Dickenson Mobile Generators" data-navigable="true"
               target="_blank" data-ownerid="7015:0" data-recordid={opp.Id}
               rel="noreferrer" href="#"
               class="outputLookupLink slds-truncate forceOutputLookup"
               data-aura-rendered-by="7026:0"
               data-aura-class="forceOutputLookup">
               {opp.Name}
            </a>
          </p>
          <div data-target-selection-name="d3d97191b9714f2388cd2ad681fdc4ed"
               class="showActionsButtonContainer" data-aura-rendered-by="7067:0">
            <button aria-haspopup="true" type="button"
                 class="slds-button slds-button_neutral showActionsButton"
                 data-aura-rendered-by="7071:0">
              <lightning-icon icon-name="utility:down" size="xx-small"
                  class="slds-icon-utility-down slds-icon_container"
                  data-data-rendering-service-uid="1862"
                  data-aura-rendered-by="7069:0">
              </lightning-icon>
            </button>
         </div>
         <p class="aggregateField" data-aura-rendered-by="7076:0"><span
            class="slds-truncate slds-text-align_right slds-grow sfaOpportunityDealMotionAmount" data-aura-rendered-by="7036:0" data-aura-class="sfaOpportunityDealMotionAmount">
           <span class="forceOutputCurrency" data-aura-rendered-by="7039:0"
               data-aura-class="forceOutputCurrency">{opp.Amount}&nbsp;₫</span>
            <span data-aura-rendered-by="7041:0">
            </span>
           </span>
         </p>
         <p class="slds-truncate runtime_sales_pipelineboardPipelineViewCardItemStencil"
            data-aura-rendered-by="6983:0"
            data-aura-class="runtime_sales_pipelineboardPipelineViewCardItemStencil">
         <a data-refid="recordId" data-special-link="true" title="Dickenson plc"
            data-navigable="true" target="_blank" data-ownerid="6963:0"
            data-recordid=" " rel="noreferrer" href="#"
            class="outputLookupLink slds-truncate forceOutputLookup"
            data-aura-rendered-by="6974:0"
            data-aura-class="forceOutputLookup">
              Dickenson plc
         </a>
         </p>
         <p class="slds-truncate runtime_sales_pipelineboardPipelineViewCardItemStencil item-stencil-last" data-aura-rendered-by="7013:0" data-aura-class="runtime_sales_pipelineboardPipelineViewCardItemStencil">
         <span class="slds-truncate slds-text-align_right slds-grow sfaOpportunityDealMotionCloseDate" data-aura-rendered-by="6988:0" data-aura-class="sfaOpportunityDealMotionCloseDate">
         <span data-aura-rendered-by="6991:0" class="uiOutputDate"
               data-aura-class="uiOutputDate">{opp.CloseDate}</span><span class=""
               data-aura-rendered-by="6992:0"></span></span>
        </p>
        <div class="hasAlert" data-aura-rendered-by="7082:0">
           <button type="button" title="Alert"
              class="slds-button slds-button_icon alertIcon activityAlert slds-button_icon-border" data-aura-rendered-by="6924:0">
              <span data-aura-rendered-by="6925:0">
                 <svg class="slds-button__icon" focusable="false" data-key="warning" aria-hidden="true" viewBox="0 0 52 52" part="icon">
                   <g>
                      <path d="M51.4 42.5l-22.9-37c-1.2-2-3.8-2-5 0L.6 42.5C-.8 44.8.6 48 3.1 48h45.8c2.5 0 4-3.2 2.5-5.5zM26 40c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3-1.3 3-3 3zm3-9c0 .6-.4 1-1 1h-4c-.6 0-1-.4-1-1V18c0-.6.4-1 1-1h4c.6 0 1 .4 1 1v13z">
                      </path>
                   </g>
                 </svg></span>
                 <span class="slds-assistive-text" data-aura-rendered-by="6927:0">Alert</span>
       </button>
          </div>
        </div>
      </div>
    </li>
  </template>
</ul>

JS code:

import { LightningElement, track, wire } from 'lwc';
import getOppsProspecting from '@salesforce/apex/OpportunityController.getOppsProspecting';


export default class MonolyListViewManagerKanban extends LightningElement {
    @track data = [];
    @track error;


    @wire(getOppsProspecting)
    wiredOppsProspecting({ error, data }) {
        if (data) {
            this.data = data;
            this.error = undefined;
        }
        else if (error) {
            this.error = error;
            this.data = undefined;
        }
    }
}

Thank you so much!

Answer 1

The various attributes you've coded in shouldn't be there. If you copy-pasted this elsewhere in the UI, note that these properties were generated at runtime, and don't actually exist in the source component's code at all.

Thinks like data-aura-rendered-by are used by the platform to identify the data associated with the DOM element in various ways. You must not manually set them to any value at all, because those values are dynamic and may be different each time the page loads or the structure of the DOM changes through a render lifecycle event. If you specify the wrong value, then the runtime will run into problems, such as selecting the wrong data, or missing data.

It looks like you're trying to recreate a standard UI element. You should start from the Lightning Design System documentation, find the component(s) you're trying to recreate, and use the blueprints you'll find there as a starting point. Alternatively, consider looking through the standard component library and see if there's a standard component, or set of components, that you can use to build an appropriate design.