Waiting until eventListener is called to return a promise

I'm trying to return the result of a fetch call but I want to wait until my eventListener detects a change within a dynamically rendered selector list.

You'll see the fetch call written below grabbing the values from an API and rendering the list of values. I was wondering if there is a way to prevent the .then(resp => resp.json()) from happening until a selection is made for selectList listener. I would ultimately like the get the value to result.then promise so that I can use that in another fetch call in the future.

Link to codepen

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic List Test</title>
</head>
<body>
  <div class="container">
    <!-- App entry point -->
  </div>
  <script type="text/javascript" src="app.js"></script>
</body>
</html>

const testUrl =
  'https://hub.dummyapis.com/employee?noofRecords=10&idStarts=1001';

const result = fetch(testUrl, {
  method: 'GET',
})
  .then(resp => resp.json())
  .then(data => {
    // Create select list
    const mainEl = document.querySelector('.container');
    let selectList = document.createElement('select');
    selectList.id = 'selectorList';
    mainEl.appendChild(selectList);
    // // Prepare name list
    let nameArray = [];
    const nameList = data;
    nameArray.push(nameList);
    console.log(nameArray[0]);
    
    for (let last in nameArray[0]) {
      let surname = nameArray[0][last].lastName;
      let option = document.createElement('option');
      option.value = surname;
      option.text = surname;
      selectList.appendChild(option);
    }

    let selectorChoice = '';
    // Grab dynamic selector value
    selectList.addEventListener('change', e => {
      selectorChoice = e.target.value;
      console.log(selectorChoice);
      return selectorChoice;
    });
  })
  .then(resp => resp.json()) // I want to wait for the eventListener to be called before this happens
  .catch(error => console.log('Error:', error));

result.then(resp => {
  console.log(resp);
});

Result in the console

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: {id: 1001, imageUrl: 'https://hub.dummyapis.com/Image?text=CA&height=120&width=120', firstName: 'Colt', lastName: 'Altenwerth', email: 'Colt.Altenwerth@dummyapis.com', …}1: {id: 1002, imageUrl: 'https://hub.dummyapis.com/Image?text=HW&height=120&width=120', firstName: 'Helena', lastName: 'Ward', email: 'Helena.Ward@dummyapis.com', …}2: {id: 1003, imageUrl: 'https://hub.dummyapis.com/Image?text=LC&height=120&width=120', firstName: 'Liliana', lastName: 'Connelly', email: 'Liliana.Connelly@dummyapis.com', …}3: {id: 1004, imageUrl: 'https://hub.dummyapis.com/Image?text=MH&height=120&width=120', firstName: 'Myah', lastName: 'Hane', email: 'Myah.Hane@dummyapis.com', …}4: {id: 1005, imageUrl: 'https://hub.dummyapis.com/Image?text=MS&height=120&width=120', firstName: 'Mauricio', lastName: 'Stracke', email: 'Mauricio.Stracke@dummyapis.com', …}5: {id: 1006, imageUrl: 'https://hub.dummyapis.com/Image?text=CS&height=120&width=120', firstName: 'Candice', lastName: 'Sipes', email: 'Candice.Sipes@dummyapis.com', …}6: {id: 1007, imageUrl: 'https://hub.dummyapis.com/Image?text=EA&height=120&width=120', firstName: 'Evangeline', lastName: 'Aufderhar', email: 'Evangeline.Aufderhar@dummyapis.com', …}7: {id: 1008, imageUrl: 'https://hub.dummyapis.com/Image?text=RR&height=120&width=120', firstName: 'Rosetta', lastName: 'Rodriguez', email: 'Rosetta.Rodriguez@dummyapis.com', …}8: {id: 1009, imageUrl: 'https://hub.dummyapis.com/Image?text=TD&height=120&width=120', firstName: 'Tina', lastName: "D'Amore", email: "Tina.D'Amore@dummyapis.com", …}9: {id: 1010, imageUrl: 'https://hub.dummyapis.com/Image?text=PS&height=120&width=120', firstName: 'Pearline', lastName: 'Sawayn', email: 'Pearline.Sawayn@dummyapis.com', …}length: 10[[Prototype]]: Array(0)
app.js:37 Error: TypeError: Cannot read properties of undefined (reading 'json')
    at app.js:36:22
app.js:40 undefined
app.js:32 Hane

Solution

Break this into three steps.

Prepare: Fetch data + cache data

const fetchResult = fetch(...).then(response => response.json());

Build list (use id to identify records!)


fetchResult.then(data => {
  // Create select list
    const mainEl = document.querySelector('.container');
    let selectList = document.createElement('select');
    selectList.id = 'selectorList';
    mainEl.appendChild(selectList);

    data.forEach(employee => {
      const option = document.createElement('option');
      option.value = employee.id;
      option.text = employee.lastName;
      selectList.appendChild(option);
    });

    let selectList.addEventListener('change', e => {
      selectorChoice = parseInt(e.target.value);
      handleUserChoice(data, selectorChoice)
    });
  }
)

Handle user choice based on id

function handleUserChoice(data, id) {
    const chosenEmployee = data.find(e => e.id === id);
    
    if (choosenEmployee) {
      // ... do what you want here!
    }
}