how to declare global array in JavaScript, initialize it's value once and use it's value at multiple places/functions

Viewed 53

I have a functionality in which I need to populate array dynamically once per request and access that array's values(populated one) at different places:

let addresses = [];
let countries = [];
let streetAddresses = [];



const streetAddressInputElement = document.querySelector("#street");
const resultWrapper = document.querySelector(".results");
const searchWrapper = document.querySelector(".wrapper");


function getAddresses() {

  var requestData = {
    "reqHeader": {
      "reqID": "",
      "sessionID": ""
    }
    }
  };
  var settings = {        "url":"https://devapi.sample.com/AddressManagement/v2/Recognition/qa",
    "method": "POST",
    "contentType": "application/json",
    "data": JSON.stringify(requestData),
  };
  $.ajax(settings).done(function (response) {
    addresses = response.addressManagementResponseV2.addressManagementResponseData;
    streetAddresses = addresses.map((x) => x.streetAddress);
  });
  
}

//function call

 getAddresses()

function loadData(data) {
  if (!data.length) {
    return searchWrapper.classList.remove("show");
  }

  let content = data.map((item) => {
    return `<li class='suggestItem'>${item}</li>`
  }).join('');
  searchWrapper.classList.add("show");
  resultWrapper.innerHTML = `<ul class='ulists' id='uid'>${content}</ul>`;
} 
//Listener for input text
streetAddressInputElement.addEventListener("input", function () {
  if(!streetAddressInputElement.value.length)
  {
     hideResultDiv();
  }
  const filteredData = filterData(streetAddresses,streetAddressInputElement.value);
  loadData(filteredData)
});

const listval=document.querySelector('.results');
listval.addEventListener("click",function(e){
  $('#street').val(e.path[0].innerText);
  hideResultDiv();
});

function onButtonSubmit()
{
// In this functtion I want to perform operation on "addresses" array 
//but here I'm getting the empty array

}

I don't know what I'm missing, I'm very new to javascript so not aware of the scope of the data. I mean I'm not loading the entire page while onSubmit method, so expecting that I should be able to access the data of above populated arrays. I have provided all the details related to this hoping now I am more clear now.

1 Answers
Related