npm inputting user-selected choice from drop down list

Question

I'm very new to node.js and async programming. I'm attempting to make a program that shuffles a spotify playlist. I put the user's playlists into an array.

I would like to display this array on the webpage for the user to select. Once the user makes their selection, I want to continue with the program using the selected element. This is the code snippet I've written thus far.

// Callback functions
    function plCallback(selected_playlist) {
      playlist_id =
      console.log(playlist_id);
    }

    function getPlaylist(body, plCallback) {
      // Pull user playlists
      for (var i = 0; i < body.items.length; i++) {
        playlistArray.push({'name': body.items[i].name, 'id': body.items[i].id});
      }

      // prompt user to select desired playlist to shuffle
      var selPlaylist = document.getElementById('playlist-drop');
      for (var i = 0; i < playlistArray.length; i++) {
        var opt = playlistArray[i].name;
        var el = document.createElement("option");
        el.textContent = opt;
        el.value = opt;
        select.appendChild(el);
      }

      // send selected playlist to Callback
      var dropdown_return = document.getElementById('playlist-drop');
      var selected_playlist = dropdown_return.options[dropdown_return.selectedIndex].value;
      plCallback(selected_playlist);
    }

I am really at a loss for what I even need to search for since I'm so new to js and node.

To summarize: I populate a js array with spotify playlists. I want to display this list to the user to make a selection. Once that selection is made, I need the program to continue using said selection.

Bob Vandevliet · Answer 1 · 2019-02-05T10:33:54.510

I don't see where node.js comes in. But I think your "callback" construction is not correct ..

This is function getPlaylist() calling function plCallback() and passes the obtained playlist object,
this doesn't make getPlaylist() asyncronous yet.

function plCallback(playlist) {
  if (playlist) {
    // Do something ..
  }
}

function getPlaylist(body) {
  var playlist = .. ;
  plCallback(playlist);
}

// Your call ..
getPlaylist(body);

This is getPlaylist() using a callback function, the callback is a parameter of getPlaylist() and is triggered after obtaining the playlist, though, this still doesn't happen asyncronous.
A great benefit of a "callback" construction is that you can do different things with playlist for each call, as there is no fixed plCallback() function defined.

function getPlaylist(body, plCallback) {
  var playlist = .. ;
  plCallback(playlist);
}

// Your call ..
getPlaylist(body, function(playlist) {
  if (playlist) {
    // Do something ..
  }
});

Now, to make the function asyncronous, check out: How can I create an Asynchronous function in Javascript?

Thank you! Getting used to async coding is really spinning my brain in circles. Can you recommend any good reading on the topic that might provide some clarity for me? And just so I'm understanding: You're saying getPlaylist should receive the user-selected playlist as part of the callback? Again, I'm sorry. Async has confused me mightly. — JeremyPenn, Feb 01 '19 at 23:09
I can understand this can be confusing. I think it would clarify a lot to check the code examples from node.js for their async functions. And to answer your question, getPlaylist should pass the user selected playlist to its callback. Hope this helps ;) — Bob Vandevliet, Feb 01 '19 at 23:21

npm inputting user-selected choice from drop down list

1 Answers1