Q:

Promise.all() for promises with multiple arguments

I am building a list of entries dynamically with data from the server.
Each entry can have a parent. I want to take the parent name from the DOM by searching for it's ID. This is all well and good if the parent entry is already on the page. If it's not, then of course it will fail.
<div class="the_entry">
  <h4></h4>
  <select></select>
</div>
<script>
  const the_entry = document.querySelector('.the_entry');
  const parsed_data_from_server = [
    { entry_id: 0, entry_name: "zero", parent_id: 2},
    { entry_id: 1, entry_name: "one", parent_id: 2},
    { entry_id: 2, entry_name: "two", parent_id: 2},
  ];

  parsed_data_from_server.foreach((entry_from_the_server) => {
    // new div
    const new_entry = the_entry.cloneNode(true);
    the_entry.parentNode.insertBefore(new_entry, the_entry);
    new_entry.querySelector('h4').innerText = entry_from_the_server.entry_name;
    new_entry.querySelector('h4').id = entry_from_the_server.entry_id;
    // new option
    const new_option = document.createElement('option');
    new_entry.querySelector('select').appendChild(new_option);
    new_option.value = entry_from_the_server.parent_id;
    const name = document.querySelector(`[id="${entry_from_the_server.parent_id}"]`)
    new_option.innerText = name.innerText; // this will fail because no element with that id exists YET
  });
</script>

So I'd like to use promises to create the option elements after the list has been processed. But to do that, I'll need to pass new_entry and entry_from_the_server. 
Here's what I tried...
let promises = [];
parsed_data_from_server.forEach((entry_from_the_server) => {
    // new div
    const new_entry = the_entry.cloneNode(true);
    the_entry.parentNode.insertBefore(new_entry, the_entry);
    new_entry.querySelector('h4').innerText = entry_from_the_server.entry_name;
    new_entry.querySelector('h4').id = entry_from_the_server.entry_id;
    // create a promise
    promises.push(new Promise((resolve, reject) => {
        resolve(new_entry, entry_from_the_server);
    }));
} );

Promise.all(promises).then((new_entries) => {
    new_entries.forEach((new_entry) => {
        // new option
        const new_option = document.createElement('option');
        new_entry.querySelector('select').appendChild(new_option);

        // where do I get entry_from_the_server from?!
        new_option.value = entry_from_the_server.parent_id;
        new_option.innerText = document.querySelector(`[id="${entry_from_the_server.parent_id}"]`).innerText;
    })
} );

All well and good until the last part... Where do I get the second argument from? Is this possible?

A:

The function resolve takes a single parameter, if you pass more than one the first one will be considered the rest will be ignored. In your case you can send an object:
promises.push(new Promise((resolve, reject) => {
     resolve({new_entry, entry_from_the_server});
}));

In the resolved value you'd get an array the first index will have the new_entry and the second will have entry_from_the_server:
Promise.all(promises).then((new_entries) => {
    //using destructuring
    new_entries.forEach(({new_entry, entry_from_the_server}) => {
        // new option
        const new_option = document.createElement('option');

        new_entry.querySelector('select').appendChild(new_option);

        new_option.value = entry_from_the_server.parent_id;
        new_option.innerText = document.querySelector(`[id="${entry_from_the_server.parent_id}"]`).innerText;
    })
} );

