LWC - Is there anyway I can push value from 2 @wire into 1 array

Question

I have 2 @wire Apex methods that will invoke code from Apex Controller. Right now the array only has value from the 1st wire (because it get called first) but not the 2nd one.

My question is: How can I have 1 array with result from 2 wire.

HTML code:

<lightning-combobox required name="fieldList" label="Group By" onchange={handleGetPicklistFieldsOptions} options={lstOfSummarizedFields}
</lightning-combobox>

JS code:

@track lstOfSummarizedFields = [];
    wireAllCurrencyRes = ''
    @wire(getCurrencyTypeFields,{ strObjectName : '$sObjectType' })
    wireAllCurrency(result) {
        this.wireAllCurrencyRes = result;
        let {error, data} = result;
        if(data) {
            for (let key in data) {
                this.lstOfSummarizedFields.push({ label: key, value: data[key] });
            }
        }
        if(error) {
            console.log('Error in getting currency fields');
        }
    }

    wireAllNumberRes = ''
    @wire(getNumberFields,{ strObjectName : '$sObjectType' })
    wireAllNumber(result) {
        this.wireAllNumberRes = result;
        let {error, data} = result;
        if(data) {
            for (let key in data) {
                this.lstOfSummarizedFields.push({ label: key, value: data[key] });
            }
        }
        if(error) {
            console.log('Error in getting number fields');
        }
    }

• I tried to create a new array to push 2 results into one but it does not work as well.

HTML code:

<lightning-combobox required name="fieldList" label="Group By" onchange={handleGetPicklistFieldsOptions} options={lstOfAllFields}
</lightning-combobox>

JS code:

@track lstOfAllFields = [];
@track lstOfSummarizedFields = [];
    wireAllCurrencyRes = ''
    @wire(getCurrencyTypeFields,{ strObjectName : '$sObjectType' })
    wireAllCurrency(result) {
        this.wireAllCurrencyRes = result;
        let {error, data} = result;
        if(data) {
            for (let key in data) {
                this.lstOfSummarizedFields.push({ label: key, value: data[key] });
                this.lstOfAllFields.push(this.lstOfSummarizedFields)//push this into an 
            }
        }
        if(error) {
            console.log('Error in getting currency fields');
        }
    }

    wireAllNumberRes = ''
    @wire(getNumberFields,{ strObjectName : '$sObjectType' })
    wireAllNumber(result) {
        this.wireAllNumberRes = result;
        let {error, data} = result;
        if(data) {
            for (let key in data) {
                this.lstOfAllFields.push({ label: key, value: data[key] });
            }
        }
        if(error) {
            console.log('Error in getting number fields');
        }
    }

Thank you so much!

Answer 1

With push, you're putting the entire array into an element of another array, rather than concatenating the values. In addition, you're calling that in a loop, which means lots of duplicate values. Either way should be considered incorrect, since you're never clearing the values. This would matter if sObjectType changed; you'd have a list of the old and new values. Instead, consider:

lstOfAllFields = [];
lstOfSummarizedFields = [];
wireAllCurrencyRes = {};
wireAllNumberRes = {};
@wire(getCurrencyTypeFields, { strObjectName: "$sObjectType" })
wireAllCurrency(result) {
  this.wireAllCurrencyRes = result;
  this.updateLists();
}
@wire(getNumberFields, { strObjectName: "$sObjectType" })
wireAllNumber(result) {
  this.wireAllNumberRes = result;
  this.updateLists();
}
updateLists() {
  this.lstOfSummarizedFields = [];
  this.lstOfAllFields = [];
  if (this.wireAllCurrencyRes.data) {
    this.lstOfSummarizedFields = Object.entries(
      this.wireAllCurrencyRes.data
    ).map(([label, value]) => ({ label, value }));
    // copy array
    this.lstOfAllFields = [...this.lstOfSummarizedFields];
  }
  if (this.wireAllNumberRes.data) {
    this.lstOfAllFields = [
      ...this.lstOfAllFields, // Copy any values
      ...Object.entries(this.wireAllNumberRes.data).map(([label, value]) => ({
        label,
        value,
      })),
    ];
  }
}

You'll want to take a look at Arrow functions, destructuring statements, Object.entries, and shorthand object notation if you'd like to understand more about how they work.