0

I am trying to access data from an API, add it to a dropdown menu, and then have a picture (URL is in the API) added when the appropriate name from the dropdown is clicked.

I have successfully created the dropdown menu in populateDropdown(), but I want to be able to access the dropdown options in completely different functions so I can create a new function. I can't figure out where I should put my return statement.

I would like to avoid Jquery if I can.

const baseURL = 'https://redacted.com'
const rolesURL = "roles"
const usersURL = "users"

function getHandlers(response) {
  fetch(baseURL + rolesURL)
    .then(response => response.json())
    .then(populateDropdown)
}

function populateDropdown(response) {
  let drop = document.getElementById("drop")
  response.forEach(function (labels) {
    let option = document.createElement("option")
    option.innerHTML = labels.label
    option.setAttribute("id", labels.id)
    drop.appendChild(option)
  })
}

I have tried searching, but cannot find a solution that doesn't use Jquery, or is from this decade.

This is my first StackOverflow question, so I apologize if there was something I didn't do.

For whoever marked my question as a duplicate, could you please provide me with the link to the question that has eluded me after an hour of searching?

gstudent1986
  • 1
  • 3
  • Are you asking how to access the `option` that you create in the `response.forEach` elsewhere in your code? If so, for what purpose (this depends how you'd design it)? – noahnu Jan 27 '18 at 21:38
  • Yes. When someone selects something from the dropdown menu, I would like an associated image to display. Thus I need a way to access the options. – gstudent1986 Jan 27 '18 at 21:41
  • 1
    @naomik did you have a chance to read the whole question? Instead of first part? – The Reason Jan 27 '18 at 21:43
  • 1
    I don't think @naomik should have closed this; it doesn't seem like a duplicate of that issue to me. Here's my answer: you could set some data on the `option` DOM node, whether as a direct property of it or via its [`dataset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset). That data could be a reference to the associated `labels` object which is set as part of your code. Then on a change event of your dropdown you can find the selected option, and then access its associated data. – tremby Jan 27 '18 at 21:44
  • *"but I **want to be able to access the dropdown options** in completely different functions so I can create a new function. **I can't figure out where I should put my return statement.**"* – this is the exact pitfall that so many encounter – nearly 4,000 up-votes on that question. You're in that pit right now. – Mulan Jan 27 '18 at 21:45
  • You don't need to keep track of each `option`. Just add an event listener to the `select` and check the selected value when you handle the `change` event. – noahnu Jan 27 '18 at 21:45
  • @ naomik, my question and the one I evidently copied are very different, please read my whole question. – gstudent1986 Jan 27 '18 at 21:46
  • in case of, if the referenced answer will not help you. in `getHandlers` function you are limiting the response should only used by `populateDropdown` function. for those situations, you should use some global state containers - like flux, redux etc. or you can use localStorage/sessionStorage to store `response` object, then use them wherever you want. – marmeladze Jan 27 '18 at 21:47
  • @naomik, can you please provide me with a link? – gstudent1986 Jan 27 '18 at 21:49
  • @gstudent1986 when a question is marked as a duplicate, the original question is linked at the top of your duplicate post. You can see it here on the top of this page: [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Mulan Jan 27 '18 at 21:51
  • @gstudent1986 fwiw, your question is good; asynchrony in javascript is tough to understand at first. And whether you're a beginner or not, the existing code you have is excellent. At the core of it though, it's a duplicate question. – Mulan Jan 27 '18 at 21:56
  • @naomik, that question and mine are very different. Thank you @ noahnu and @ tremby for actually helping. – gstudent1986 Jan 27 '18 at 21:56
  • 1
    @gstudent1986 the core of your question is how to "unpack" the value from the promise and return it. That's the very same core question as in the duplicate. Your core problem is not the code, but time. You are trying to return a value that is not there (yet) and where you have no idea when it will be accessible, if ever. The linked duplicate shows you all the ways how you can deal with that problem and how to get notified as soon as the value you're interested in is available. **But you can not return the value! It ain't there yet!** – Thomas Jan 27 '18 at 22:30

0 Answers0