Why can't I render list of related product in LWC

Problem : I have to display a list of products related to a package (which is related to an order), but I have 2 issues:

1. Only one element of the list is displaying
2. It's displaying the same element in all the packages linked to the same order

I have use for:each to display the list of packages related to the same order and it's working, but it does not for the product component.

Here's my code:

Parent Component html:

<template if:true={doDetails}> <template for:each={doDetails} for:item="doDetail"> <lightning-accordion allow-multiple-sections-open onsectiontoggle={handleSectionToggle} active-section-name={activeSections} key={doDetail.doNbr}> <lightning-accordion-section name="A" label="Package" > <div class="slds-form" role="list" > <div class="slds-form__row"> <div class="slds-form__item" role="listitem"> <div class="slds-form-element slds-form-element_readonly slds-form-element_horizontal slds-hint-parent"> <span class="slds-form-element__label"> Status</span> <div class="slds-form-element__control"> <div class="slds-form-element__static"> {doDetail.doFulfillmentStatus} </div> </div> </div> </div> </div> </div> <template for:each={doLineItems} for:item="doLineItem"> <c-ic-product-details get-do-nbr={keyDoNbr} key={doLineItem.orderLineId}></c-ic-product-details> </template> </lightning-accordion-section> </lightning-accordion> </template> </template> 

Parent Component js:

import { LightningElement, track, api } from 'lwc'; import getCustomerOrder from '@salesforce/apex/ctrlCustomerOrder.getCustomerOrder'; export default class IcPackageInformation extends LightningElement { @track displayPopup = false; @track doDetails; @track doLineItems; @api keyDoNbr; connectedCallback(){ this.fetchOrderDetails(); } fetchOrderDetails(){ let customerOrderNumber = 'xxxxxx'; getCustomerOrder({customerOrderNumber:customerOrderNumber}) .then(data => { let objData={ doDetails:'', }; this.doDetails = data.doDetails; this.doDetails.forEach(doDetail =>{ for(let i = 0; i < doDetail.doLineItems.length; i++){ this.keyDoNbr = doDetail.doLineItems[i].doNbr; this.doLineItems = doDetail.doLineItems; } }) }).catch(error => { window.console.log('callout error ', JSON.stringify(error)); }) } } 

Child Component js:

import { LightningElement, track, api } from 'lwc'; import getCustomerOrder from '@salesforce/apex/ctrlCustomerOrder.getCustomerOrder'; export default class IcProductDetails extends LightningElement { @track displayPopup = false; @track doDetails; @track doLineItems; @api getDoNbr; handleClick(event) { this.template.querySelector('a').click(); this.displayPopup = true; } connectedCallback(){ this.fetchOrderDetails(); } fetchOrderDetails(){ let customerOrderNumber = 'xxxxxx'; getCustomerOrder({customerOrderNumber:customerOrderNumber}) .then(data => { let objData={ doDetails:'', doLineItems: '' }; for(let i = 0; i < data.doDetails.length; i++){ this.doDetails = data.doDetails; for(let j = 0; j < data.doDetails[i].doLineItems.length; j++){ this.doLineItems = data.doDetails[i].doLineItems[j]; } } }).catch(error => { window.console.log('callout error ', JSON.stringify(error)); }) } } 

Did I miss a step to render the list of related products ?