Wire Handler – How to Pass a Wire Handler or Variable Array to a Function

apexjavascriptlightning-web-components

I created a function in a separated JavaScript file called: "MapMarkers.js", and wanted to know if its possible to pass the wire handler or variable array that stores the data via querying directly from Apex, to the "MapMarkers" function. The Wire Service works correctly when displaying the data in HTML, but I want to be able to record and store my data to an array in the JavaScript file.

The main goal is to display this data via a map-marker in the lighting-maps. Is it possible to do? Or should I do a different method to accomplish my goal? (like importing the array to the JS?)

The LWC Code:

import { LightningElement, wire } from 'lwc';

// Importing from the "MapMarkers.js" file.
import { MapMarkers } from './MapMarkers';

// Importing from the "mappingBox" LWC.
import { SearchString, SearchState } from 'c/mappingBox';

// Importing from the "messageChannels" folder.
import { subscribe, MessageContext } from 'lightning/messageService';
import COUNTER_FILE from '@salesforce/messageChannel/updatecounter__c';

// Importing Apex "QueryData" code, to get Opportunity object and fields data.
import getOpportunityList from '@salesforce/apex/QueryData.getOpportunityList';

// -----------------------------------------------------------------------------

// Global Variables.
let SearchStreet = '20 abc St';
let SearchCity = 'boston';

export default class Mapping extends LightningElement {

    // ** Still in work **

    myArray
    @wire(getOpportunityList) 
    WiredOpportunities({data, error}){
        if(data){
            this.myArray = data
        }

        if(error){
            console.error(error)
        }
    }

//Would It be possible to pass "myArray", to my function, then break it up in the "MapMarkers.js" file? 
//Or should I import "myArray" to my file?
mapMarkers = MapMarkers(SearchCity, SearchState, SearchStreet, myArray);

MapMarkers.js

// Could Importing from the "mapping.js" file work?
// import { opportunities } from './mapping';

// This function is for inputting all the "Opportunities", and the search location to the map.
export function MapMarkers(SearchCity, SearchState, SearchStreet, myArray){

Apex Code:

public with sharing class QueryData {
    
    @AuraEnabled(cacheable=true)
    public static List<Opportunity> getOpportunityList() {
    
        List<Opportunity> OppList = new List<Opportunity>();
        OppList = [SELECT Id, Service_Address__c, Development_Rep__c, Name, Project_Type__c, CloseDate FROM Opportunity LIMIT 5];
    
        return OppList;
    
    }
  
}

Lastly:

I would like to apologize for asking a lot of questions or any similar questions, for the past two weeks. I'm fairly new with Salesforce development/programming, as I'm also trying to accomplish a complete a project.

Best Answer

If mapMarkers is meant to be bound like this: <lightning-map map-markers={mapMarkers}></lightning-map>, then you just need to do that in your wire handler:

mapMarkers;
@wire(getOpportunityList) handleGetOpportunityList({data}) {
  if(data) {
    this.mapMarkers = MapMarkers(SearchCity, SearchState, SearchStreet, data);
  }
}

Or, if you mean to have the search variables eventually being updated based on user input, you can do that, too. Here's an example of that:

@wire(getOpportunityList) opportunities;
mapMarkers;
handleInputChange(event) {
  // update whichever search variable, then...

  this.mapMarkers = MapMarkers(SearchCity, SearchState, SearchStreet, this.opportunities.data);
}

Note: Be warned that your global variables really are global in respect to your component. If you add the component more than once, a change will affect all components, which may cause undesirable behavior if you're not careful. Unless/until you feel comfortable with that possibility, I'd strongly recommend you only use class variables.

Related Topic