Iterating over nested template for:each lwc, use key from outer for in inner template for

Question

I am iterating over a wrapperList to display list of fields in lightning-record-edit-form. This wrapperlist is a list of questions.

Each question has files attached which i am querying in a separate list(fileList). I want to be able to pass the id of my wrapperList and get the file name for each from fileList. Code looks like this -

<template for:each={wrapperList} fro:item="each">
    <lightning-record-edit-form record-id={wrapper.id} key={wrapper.Id}>
        <lightning-input-field fiel-name="customfield__c" onchange={handleInput} data-recordId={wrapper.Id}> </lightning-input-field>
        <lightning-file-upload record-id={wrapper.Id} onuploadfinished={handleUploader}></lightning-file-upload>
        //this is where i am stuck
        <template for:each={fileList} for:item="attach">
            <li key={wrapper.Id}
{attach.value} ===> i want to show only the files that are attached the specific question i am iterating over, this list is displaying all the files
            </li>
        </template>
</template>

js code-

//to get files
 @wire(getAllFiles, { userId: userId })
    wiredAllFiles({data,error}){
        this.#wiredFiles = data;
        this.renderData();
    }
  
    //get questions
   @wire(getQuestions, { userId: userId })
   wiredQuestions({error,data}){
    if(data){
        this.wiredDataResult = data;
        Object.keys(data).forEach(key => {

            let properties = key.split(', ');
            let obj = {};
            properties.forEach(function(property) {
                let temp = property.split(':');
                
                obj[temp[0]] = temp[1].replace(')]', '');
            });
this.assessmentId = obj.Id;
let titleVar = obj.Name ;
this.formTitle = "Questionnaire - "+titleVar;
this.status = 'Status : '+obj.Assessment_Status__c;          
            this.wrapperList= (data[key]);            
        });
      this.renderData();
     }
   
    }

    //add files and wrapper to one variable
    renderData(){
        console.log('entered renderdata-1',this.wrapperList);=> i see data
        console.log('entered renderdata-2',this.#wiredFiles); => i see data
        if(this.wrapperList && this.#wiredFiles){
            this.wrapperListNew = Object.entries(
                this.wrapperList).map(([questionKey,questionValue])=> ({
                    ...questionValue,
                    files:Object.entries(
                        this.#wiredFiles).filter((file)=> file.LinkedEntityId === questionValue.Id)
                    })
                    );
        }
        console.log('this.wrapperListNew>>>1' ,this.wrapperListNew);
      //  console.log('this.wrapperListNew>>>3' ,this.wrapperListNew[0].Id); > this is undefined
    }
   

 <template if:true={wrapperList}>   
<template for:each={wrapperList} for:item="wrapper">  
<lightning-record-edit-form record-id={wrapper.Id} object-api-name="Questions__c" key={wrapper.Id}> 
<div class="slds-box"> 
<lightning-output-field field-name="Question__c"></lightning-output-field
 <lightning-input-field field-name="Response__c" name="Response__c" onchange={handleInput} data-recordid={wrapper.Id} class="fieldsToValidate" required></lightning-input-field> 
<lightning-file-upload label="Attach Relevant Documents" name="fileUploader" accept={acceptedFormats} record-id={wrapper.Id} data-recordid={wrapper.Id} onuploadfinished={handleUploadFinished} multiple></lightning-file-upload>
<template if:true={fileList}>
<ul>
<template for:each={fileList} for:item="attach" for:index="rowId"> 
<li key={attach.key}> 
                                                              {attach.value}
</li> 
</template>
</ul>
</template>

Answer 1

You would need to organize your data so that each wrapper had the list of files for that question.

<template for:each={wrapperList} for:item="wrapper">
   ... some time later ...
   <template for:each={wrapper.files} for:item="attach">
     ... file data ...
   </template>
</template>

This would be true even if you had a child component, because you simply can't filter dynamically in LWC.

Coordinate the data, have both wire methods call a common method that organizes the data:

#wiredFiles;
#wiredQuestions;
wrapperList;
@wire(getFiles) handleWiredFiles({data,error}) {
  this.#wiredFiles = data;
  this.renderData();
}
@wire(getQuestions) handleWiredQuestions({data,error}) {
  this.#wiredQuestions = data;
  this.renderData();
}
renderData() {
  if(this.#wiredFiles && this.#wiredQuestions) {
    this.wrapperList = Object.entries(
      this.#wiredQuestions
    ).map(([questionKey, questionValue]) =>
      ({
        ...questionValue,
        files: Object.entries(
          this.#wiredFiles
        ).filter(
          // Adjust this comparison as necessary
          (file) => file.ParentId === questionValue.Id
        )
      })
    );
  }
}

In this manner, you'll have the data mapped together for rendering.